MUI开发需要注意的“点”

1. 所有 固定栏 组件（包含 .mui-bar 属性）需要放在有 .mui-content属性的组件之前。如：顶部导航栏（.mui-bar-nav）、底部工具条（.mui-bar-footer）、底部选项卡（.mui-bar-tab）。其他内容将放在 .mui-content 属性的组件内，否则会被固定栏遮罩。

    
MUI-Demo


    按钮
    按钮
    按钮

正确书写规范

    按钮
    按钮
    按钮


    
MUI-Demo

错误书写

由上图我们可以看出最上方的两个按钮被标题栏所遮挡

2. 始终要为 button 按钮添加 type 属性。浏览器默认为 type="submit"，如果将没有设置 type属性的 button 放在 form 表单中，将会产生重复提交，多次刷新。

3. 页面初始化：必须执行 mui.init() 方法

4. 页面跳转建议使用 mui.openWindow() 方法打开一个新的webview，MUI会自动监听新页面的 loaded 事件，先进行数据渲染，然后打开新页面。程序中我们会多次使用到Ajax获取数据，然后在渲染到界面上。如果我们使用 href跳转，将会面临DOM尚未渲染完毕，页面显示空白的情况，给客户一种程序有问题的既视感。

• hello mui中的无等待窗体切换是如何实现的
• 提示HTML5的性能体验系列之一 避免切页白屏

5. MUI框架自动封装了页面关闭，若需要自定义返回逻辑，则重写 mui.back() 方法即可。

6. 手机浏览器的 click 点击存在300毫秒延迟，MUI针对此问题封装了 tap 事件，因此在页面存在点击事件时，使用以下代码：

element.addEventListener('tap', function(){
    //点击事件
})

7. 常见错误

//凡涉及到H5+的API，都建议在 mui.plusReady()方法中执行，否则会因为plusready事件未完成而报此错误
//Uncaught ReferenceError: plus is not defined
mui.plusReady(function() {
    //获取摄像头管理对象
    plus.camera.getCamera();  
})

8. mui.plusReady失效
plusReady 事件仅在 webview 首次创建时触发，使用mui.openWindow方法多次打开已存在的同样id的webview时，是不会重复触发plusReady事件的；因此若业务写在 plusReady 事件中，可能会出现执行结果和预期不一致的情况；此时需要通过自定义事件触发；
案例：mui.plusReady有时会失效

参考文档：

• 新手指南
• MUI开发注意事项

上一章	下一章