跨平台移动APP开发进阶(一):mui开发注意事项
大家好,又见面了,我是你们的朋友全栈君。
mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验;这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文;想了解mui更详细的信息,请访问mui官网。
DOM结构
关于mui页面的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中。
始终为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(){
//点击响应逻辑
});
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/138152.html原文链接:https://javaforall.cn
相关文章
- .NET(c#) 移动APP开发平台 – Smobiler(1)
- python移动app开发_神奇的Kivy,让Python快速开发移动app
- 移动端App开发流程管理
- 跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路
- 移动端开发之APP消息推送[通俗易懂]
- uni-app APP地图移动时获取地图中心点经纬度坐标
- 基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
- 篮茑中文编程开发的APP与VFP混搭,一个字“稳”
- 微软 Win11 全新画图、照片 App 视觉更新曝光,采用流畅设计
- 第129期:flutter布局和开发响应式app的方案
- app自动化测试(Android)--App 控件定位
- [ios开发]-APP-上架流程
- 2018最新苹果APP上架App Store流程(超详细)
- [ios开发]-APP-上架流程
- iOS开发助手、ipa上传工具、苹果APP快速上架辅助工具Appuploader
- 风多大都能让你听见,这个视频制作APP帮你告别「全损音质」
- iOS 设置app禁止横屏详解手机开发
- 使用jqMobi开发app基础:panel之间的跳转方式详解手机开发
- 使用jqMobi开发app基础:viewport指令详解手机开发
- iOS开发笔记 – App上架流程(视频分享)详解手机开发
- 小米运动/小米穿戴/小米健康 App 未来将合并成一个,新品已在路上
- 肯德基APP上乘体验Redis助力(肯德基app redis)
- APP构建MySQL数据库无缝连接(app连接mysql)
- 探索App与MySQL的交互之路(app与mysql交互)
- 使用MYSQL技术打造高效电影App下载平台(MYSQL下载电影app)
- 荣耀Magic3严控App权限:非必须一律禁止
- 浅谈使用PHP进行手机APP开发(API接口开发)