003-跨平台开发-MUI-注意事项
2017-10-20 本文已影响339人
53b3f4658edc
视频教程：点击这里
DOM结构
固定栏靠前
- 所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：
- 放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；
一切内容都要包裹在mui-content中
- 除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩。
原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：
.mui-bar-nav ~ .mui-content {
padding-top: 44px;
}
.mui-bar-footer ~ .mui-content {
padding-bottom: 44px;
}
.mui-bar-tab ~ .mui-content {
padding-bottom: 50px;
}
- 你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。而且因为css可以人为改动，数据可能会变化，所有不建议通过指定padding来解决遮罩问题。
- 总之：除了固定栏之外，其它内容都要包裹在.mui-content中。
始终为button按钮添加type属性
- 若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。
<!--3.始终为button按钮添加type属性-->
<form action="" >
<button type="button">点我一下</button>
</form>
窗口管理
页面初始化：必须执行mui.init方法
- mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；
<script type="text/javascript" charset="utf-8">
//4.窗口管理
mui.init();
</script>
页面跳转：抛弃href跳转
- 当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用mui.openWindow方法打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；
//5.页面跳转：抛弃href跳转
document.getElementById("jump").addEventListener("tap",function() {
//5.页面跳转：抛弃href跳转
document.getElementById("jump").addEventListener("tap",function() {
// 新建一个webview
mui.openWindow({
url:"http://www.itcourse.top"
})
return false
})
页面关闭：勿重复监听backbutton
- mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。
//6.页面关闭：勿重复监听backbutton
mui.back = function() {
alert("sdds")
}
手势操作
点击：不要使用click
- 快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（因为双击与单击的问题），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：
element.addEventListener('tap',function(){
//点击响应逻辑
});
常见错误
- Uncaught ReferenceError: plus is not defined(未被捕获的参考错误: plus没有定义)
- 在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，否则可能会报“plus is not defined”的错误；
- mui为简化开发，将plusReady事件封装成了mui.plusReady()方法，凡涉及到HTML5+的api，建议都写在mui.plusReady方法中；
mui不是jq，不封装dom操作
-
与ui无关的mui不做，你愿意用jq或zepto就自己用，并不冲突。
-
但并不建议在移动App里引入jq或zepto这些框架，原因如下：
- 为了性能，层层封装的框架，尤其是遍历循环dom时，影响效率，尤其在低端Android手机上。
-
mui与vue、react、angular也不是一个层面的东西，可以在一个工程里混合使用。但在大多数ui控件上，应该直接使用mui的写法，因为mui的绘制是最朴素的HTML绘制，不是经过js操作的绘制，这种方案的效率比经过js绘制的效率要高很多。只有必须经过js操作才能渲染的控件，比如ajax联网后填充的list，此时使用vuew或react都可以。
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
//4.窗口管理
mui.init();
mui.ready(function() {
//5.页面跳转：抛弃href跳转
//7.手势操作
document.getElementById("jump").addEventListener("tap",function() {
// 新建一个webview
mui.openWindow({
url:"http://www.itcourse.top"
})
return false
})
//6.页面关闭：勿重复监听backbutton
mui.back = function() {
alert("sdds")
}
})
</script>
</head>
<body>
<!--
1.固定栏靠前：
放在.mui-content元素之前，即使是底部工具条和底部选项卡，
也要放在.mui-content之前，否则固定栏会遮住部分主内容；
2.一切内容都要包裹在mui-content中
除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩。
3.始终为button按钮添加type属性
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，
这样若将没有type的button放在form表单中，点击按钮就会执行form表
单提交，页面就会刷新，用户体验极差。
4.窗口管理
页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：按键监听、
手势监听等，因此mui页面都必须调用一次mui.init()方法；
5.页面跳转：抛弃href跳转
当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，
然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体
验障碍；为解决这个问题，建议使用mui.openWindow方法打开一个新的webview，
mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；
6.页面关闭：勿重复监听backbutton
mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，
需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，
切勿简单通过addEventListener添加backbutton监听，
因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑
依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选
择了取消，也会继续关闭窗口。
7.手势操作
点击：不要使用click
快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，
用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟
（因为双击与单击的问题），mui为了解决这个问题，封装了tap事件，因此在
任何点击的时候，请忘记click及onclick操作
-->
<!-- 1.固定栏靠前 -->
<!-- mHeader(带返回箭头的标题栏)-->
<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">注意事项</h1>
</header>
<!--2.一切内容都要包裹在mui-content中-->
<div id="">
试试
</div>
<!-- mBody(主体) -->
<div class="mui-content">
hh
<!--3.始终为button按钮添加type属性-->
<form action="" >
<button type="button">点我一下</button>
</form>
<a id="jump">跳转</a>
</div>
</body>
</html>
视频教程：点击这里
源码下载
关注下方的微信公众号，回复：mui_course.code
欢迎加入交流群：451826376
更多信息：www.itcourse.top
