MUI 介绍、新项目创建、基础布局
MUI 为何诞生
1、性能和体验的差距，一直是 mobile app 开发者放弃 HTML5 的首要原因。
2、浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题，这些都让 HTML5 开发者倍感挫败，尤其在 Android 低端机运行。
3、浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的 ui 框架但性能低下。mui 框架有效的解决了这些问题，这是一个可以方便开发出高性能 App 的框架，也是目前最接近原生 App 效果的框架。
MUI 的定位是：最接近原生体验的移动 App 的 UI 框架
基于 mui 的定位，产生了 mui 的几个特点，轻、小、只涉及 UI、只为移动 App 而生、界面风格原生话。
1、mui 不是 jq，不封装 dom 操作
与 ui 无关的 mui 不做，可以用 jq 或 zepto 就用，并不冲突。
但并不建议在 移动 App 里引入 jq 或 zepto 这些框架，原因如下：
为了性能，层层封装的框架，尤其是遍历 dom 时，影响效率，尤其在低端 Android 手机上。
原生 JS 挺简单，为何需要 jq ？
手机上只有 webkit 浏览器（忽略 wp，反正 mui 不支持 wp），根本就不需要 jq 这种封装来操作 dom。
而且 HBuilder 提供了代码块来简化开发，敲 dg、dq，直接生成 document.getElementById(“”)、document.querySelectorAll(“”)，非常快捷方便，而且执行性能非常高，而且没有浏览器兼容问题。
2、mui、HTML5+、5+ Runtime 的关系说明
mui 是一个前端框架，HTML5+ 是一套 HTML5 能力扩展规范，HTML5+ Runtime 是实现 HTML5+ 规范的强化浏览器引擎。
开始体验 MUI
1、安装新版本 HBuilder
HBuilder
2、新建 app 项目
基础布局
头部
核心 css mui-bar mui-bar-nav
1
2
3
4
| <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">test</h1>
</header>
|
主体部分
核心 css mui-content
1
2
3
| <div class="mui-content">
test...
</div>
|
组件
折叠面板
1
2
3
4
5
6
7
8
| <ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>
|
常用按钮
1
2
3
4
5
6
| <button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>
|
操作表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <div class="mui-content">
<button type="button" class="mui-btn" onclick="handleClick()">操作表</button>
</div>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜单1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜单2</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消</b></a>
</li>
</ul>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function handleClick() {
mui("#sheet1").popover("toggle");
}
</script>
|
数字角标
1
2
3
4
5
6
7
8
9
10
11
12
| <span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>
<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
|
单选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <div class="mui-content">
<div class="mui-input-row mui-radio">
<label>radio</label>
<input name="radio2" type="radio" />
</div>
<div class="mui-input-row mui-radio">
<label>radio</label>
<input name="radio2" type="radio" />
</div>
<div class="mui-input-row mui-radio mui-left">
<label>面条</label>
<input class="radio1" name="radio1" type="radio" value="面条" />
</div>
<div class="mui-input-row mui-radio mui-left">
<label>包子</label>
<input
class="radio1"
name="radio1"
type="radio"
value="包子"
checked="checked"
/>
</div>
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell mui-selected">
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 3</a>
</li>
</ul>
<button type="button" class="mui-btn" onclick="getVals()">获取值</button>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function getVals() {
let res = getRadioRes("radio1");
if (res == null) {
mui.toast("请选择");
return;
}
mui.toast(res, { duration: "long", type: "div" });
}
function getRadioRes(className) {
let rdsObj = document.getElementsByClassName(className);
let checkVal = null;
for (let i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked) {
checkVal = rdsObj[i].value;
}
}
return checkVal;
}
</script>
|
复选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <div class="mui-content">
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input name="checkbox1" class="checkbox1" value="Item 1" type="checkbox" />
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input name="checkbox1" class="checkbox1" value="Item 2" type="checkbox" />
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input
name="checkbox1"
class="checkbox1"
value="Item 3"
type="checkbox"
checked="checked"
/>
</div>
<button type="button" class="mui-btn" onclick="getVals()">获取值</button>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function getVals() {
let res = getRadioRes("checkbox1");
if (res.length == 0) {
mui.toast("请选择");
return;
}
mui.toast(res, { duration: "long", type: "div" });
}
function getRadioRes(className) {
let rdsObj = document.getElementsByClassName(className);
let checkVal = [];
for (let i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked) {
checkVal.push(rdsObj[i].value);
}
}
return checkVal;
}
</script>
|
系统日期选择框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <button type="button" class="mui-btn" onclick="pickDate()">获取日期</button>
<script>
function pickDate() {
let dDate = new Date();
dDate.setFullYear(2016, 7, 16);
let minDate = new Date()
minDate.setFullYear(2010, 1, 1);
let maxDate = new Date();
maxDate.setFullYear(2020, 11, 31);
plus.nativeUI.pickDate(
function(e) {
let d = e.date;
mui.toast('您选择的日期是:' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate());
},
function(e) {
mui.toast('你没有选择日期');
}, {
title: '请选择日期',
date: dDate,
minDate: minDate,
maxDate: maxDate
})
}
</script>
|
系统时间选择框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <button type="button" class="mui-btn" onclick="pickTime()">获取时间</button>
<script>
function pickTime(){
var myDate = new Date();
var h = myDate.getHours();
var min = myDate.getMinutes();
var dTime = new Date();
dTime.setHours(h,min);
plus.nativeUI.pickTime(function(e){
var d = e.date;
mui.toast('您选择的时间是' + d.getHours() + ":" + d.getMinutes());
},function(e){
mui.toast('您没有选择时间')
},{
title:'请选择时间',
is24Hour: true,
time:dTime
})
}
</script>
|
对话框
警告框
1
2
3
4
5
6
7
8
| <button type="button" class="mui-btn" onclick="alert()">警告框</button>
<script>
function alert() {
mui.alert('请不要随便点击', '警告消息', '确定', function() {
mui.toast('提示对话框上关闭后的回调函数');
})
}
</script>
|
确认框
1
2
3
4
5
6
7
8
9
10
11
12
| <button type="button" class="mui-btn" onclick="confirm()">确认框</button>
<script>
function confirm() {
mui.confirm('MUI 是个好框架？', 'Hello MUI', new Array('否', '是'), function(e) {
if (e.index == 1) {
mui.toast('感谢您的支持')
} else {
mui.toast('MUI 没有得到你的认可，继续加油！');
}
})
}
</script>
|
输入对话框
1
2
3
4
5
6
7
8
9
10
11
12
| <button type="button" class="mui-btn" onclick="prompt()">输入对话框</button>
<script>
function prompt() {
mui.prompt('请输入您对 MUI 的评语', '性能好', 'Hello MUI', new Array('取消', '确认'), function(e) {
if(e.index == 1){
mui.toast(e.value);
}else{
mui.toast('您取消了输入');
}
});
}
</script>
|
消息提示框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <button type="button" class="mui-btn" onclick="shorttoast()">短的消息提示框</button>
<button type="button" class="mui-btn" onclick="longtoast()">长的消息提示框</button>
<script>
function shorttoast(){
mui.toast('short 消息提示框',{
"duration" : "short"
})
}
function longtoast(){
mui.toast('long 消息提示框',{
"duration" : "long"
})
}
</script>
|
表单元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" >确认</button>
<button type="button" class="mui-btn mui-btn-danger" >取消</button>
</div>
</form>
|
初始化
mui 在 mui.int() 中会自动初始化基本控件，但是动态添加的元素需要重新进行初始化
1
| mui('.mui-input-row input').input();
|
轮播组件
连接模拟器
连接模拟器需要用到 ADB 。
1
2
3
4
5
| // 连接模拟器端口
adb connect 127.0.0.1:62001
// 查看连接设备
adb devices
|
也可以通过 修改 HBuilder 运行配置 Android 模拟器端口 来实现连接。
注意：引入顺序。mui.min.js 需要在 demo渲染前 加载。如果在 demo 渲染后加载会莫名报错
1
2
3
4
5
6
7
8
9
| <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
|
以上是我对下列视频及文章的归纳和总结。
MUI 视频教程
相关资料
HBuilder X 中使用模拟器进行 App 开发
ADB 常用命令及其用法大全
如何查看夜神模拟器的端口
DCloud appid 用途/作用/使用说明
Android 平台签名证书(.keystore)生成指南
Android 平台本地（离线）打包指南 - Android Studio
Android 平台云端打包证书使用说明
manifest.json 文档说明
MUI – plus初始化原理及plus is not defined，mui is not defined 错误汇总
Hbuilderx真机运行失败,失败原因:手机上没有信任本计算机的授权,请在手机上信任该