webapp mui & HTML5+ (三) 之 mui开发注意事项

最新推荐文章于 2021-06-08 10:18:25 发布

骑乌龟赛跑

最新推荐文章于 2021-06-08 10:18:25 发布

阅读量1.1k

点赞数

分类专栏： webapp 文章标签： web app mui框架 js

webapp 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

webapp mui & HTML5+ (三) 之 mui开发注意事项

mui框架自身有一些规则，刚接触的同学不很熟悉，以下开发注意事项，有需要的朋友可以参考下。以下来自官方文档

DOM结构

关于mui页面的dom，你需要知道如下规则。
1. 固定栏靠前
所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；
2. 一切内容都要包裹在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中。

3.始终为button按钮添加type属性
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

窗口管理

页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；
页面跳转：抛弃href跳转
当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用[mui.openWindow方法](http://dcloudio.github.io/mui /javascript/#openwindow)打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面。

有兴趣可以了解一下：
* hello mui中的无等待窗体切换是如何实现的
* 提示HTML5的性能体验系列之一避免切页白屏
页面关闭：勿重复监听backbutton
mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。

手势操作

点击：忘记click 快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延 迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作， 统统使用如下代码：


    element.addEventListener('tap',function(){
        //点击响应逻辑
    });

常见错误

Uncaught ReferenceError: plus is not defined
在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，否则可能会报“plus is not defined”的错误；
mui为简化开发，将plusReady事件封装成了mui.plusReady()方法，凡涉及到HTML5+的api，建议都写在mui.plusReady方法中；