《跨平台移动APP开发进阶(一)mui开发注意事项x.docx》由会员分享，可在线阅读，更多相关《跨平台移动APP开发进阶(一)mui开发注意事项x.docx（4页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、跨平台移动APP开发进阶(一)mui开发注意事项x跨平台移动 APP 开发进阶( 一)mui 开发留意事项 mui 开发留意事项 Mui HTML5 开发框架 mui 是一个高性能的 HTML5 开发框架，从 UI 到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟识，特总结本文；想了解 mui 更具体的信息，请访问 mui 官网。DOM 结构 关于 mui 页面的 dom，你须要知道如下规则：固定栏靠前 所谓的固定栏，也就是带有.mui-bar（类选择器）属性的节点，都是基于 fixed 定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.m
2、ui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素运用时需遵循一个规则：放在 mui-content 元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content 之前，否则固定栏会遮住部分主内容； # 一切内容都要包袱在 mui-content 中 除了固定栏之外，其它内容都要包袱在.mui-content 中，否则就有可能被固定栏遮罩，缘由：固定栏基于 Fixed 定位，不受流式布局限制，一般内容依旧会从 top:0的位置起先布局，这样就会被固定栏遮罩，mui 为了解决这个问题，定义了如下css 代码：.mui-bar-nav .mui-conten
3、t padding-top: 44px; .mui-bar-footer .mui-content padding-bottom: 44px; .mui-bar-tab .mui-content padding-bottom: 50px; 你当然可以通过自定义 CSS 的方式实现如上类似效果，但为了运用简便，建议将除固定栏之外的全部内容，全部放在.mui-content 中。始终为 button 按钮添加 type 属性 若 button 按钮没有 type 属性，阅读器默认根据 type=submit 逻辑处理，这样若将没有 type 的 button 放在 form 表单中，点击按钮就会执
4、行 form 表单提交，页面就会刷新，用户体验极差。窗口管理 页面初始化：必需执行 mui.init 方法 mui 在页面初始化时，初始化了许多参数配置，比如：按键监听、手势监听等，因此 mui 页面都必需调用一次 mui.init()方法； 页面跳转：抛弃 href 跳转 当阅读器加载一个新页面时，若页面 DOM 尚未渲染完毕，页面会先显示空白，然后等 DOM 渲染完毕后，再显示详细内容，这是 WEB 阅读器技术无法逾越的体验障碍；为解决这个问题，建议运用 mui.openWindow 方法(http:/dcloudio.github.io/mui/javascript/#openwindo
5、w)打开一个新的 webview，mui 会自动监听新页面的 loaded 事务，若加载完毕，再自动显示新页面；扩展阅读：hello mui 中的无等待窗体切换是如何实现的 提示 HTML5 的性能体验系列之一 避开切页白屏 页面关闭：勿重复监听 backbutton mui 框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则须要重写 mui.back 方法，切勿简洁通过 addEventListener 添加 backbutton 监听，因为 addEventListener 只会增加新的执行程序，mui 默认封装的监听执行逻辑依旧
6、会接着执行，因此若仅addEventListener 添加用户确认框，则用户即使选择了取消，也会接着关闭窗口。手势操作 点击：遗忘 click 快速响应是 mobile App 实现的重中之重，探讨表明，当延迟超过 100 毫秒，用户就能感受到界面的卡顿，然而手机阅读器的 click 点击存在 300 毫秒延迟（至于为何会延迟，及 300 毫秒的来龙去脉，请自行谷百），mui 为了解决这个问题，封装了 tap 事务，因此在任何点击的时候，请遗忘 click 及 onclick 操作，统统运用如下代码：element.addEventListener(tap,function()/点击响应逻辑 );