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真机运行失败,失败原因:手机上没有信任本计算机的授权,请在手机上信任该