MUI开发需要注意的“点”

2019-04-13 本文已影响1人 CodexBai

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

<!--拥有mui-bar属性的组件必须放在拥有mui-content组件之前-->
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">MUI-Demo</h1>
</header>
<div class="mui-content">
    <button type="button" class="mui-btn mui-btn-blue">按钮</button>
    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">按钮</button>
    <button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
</div>

正确书写规范

<!--拥有mui-bar属性的组件必须放在拥有mui-content组件之前-->
<div class="mui-content">
    <button type="button" class="mui-btn mui-btn-blue">按钮</button>
    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">按钮</button>
    <button type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
</div>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">MUI-Demo</h1>
</header>

错误书写

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

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

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

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

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();  
})

MUI开发需要注意的“点”

参考文档：

猜你喜欢

热点阅读