开发规范
- 页面渲染尽量不用js做,想要渲染快,就直接写HTML和css渲染,js渲染的界面显示更慢。- 少用padding、margin,避免错位重绘。比如界面绘制开始是一个样子,然后很快位置移动进行重绘,这样很低效,容易闪屏。- 减少图片尺寸
head和body分开载入的方案,此方案已废弃,由mui.openWindowWithTitle原生title方案替代,所有OPen新界面,尽量使用openWindowWithTitle,不要在界面使用header。除非用到自定义操作(比如标题栏右部按钮,或者标题栏渐变等效果)
AMD框架尽量不用,包括angularjs在内,js动态解析标签再替换渲染是很慢的。
其次,jquery也尽量不要使用。document.getElementById("") 、document.querySelectorAll("")、$(""),这三者性能依次下降,尤其是在低端Android上遍历dom时,当你辛辛苦苦减少白屏和用户等待时间时,你会非常愤怒这些js框架拖了你的后腿。
并且HBuilder提供了很多代码块来快速完成代码,比如敲dg就可以出document.getElementById(""),比敲$("#")要快多了。
预加载使用
-
过程及注意:
启动一个页面,后台创建一个隐藏Webview ,传参使用evalJs(注:此处应该用封装过的mui.fire()自定义事件,事件扩展性更高)
同时显示在屏幕上的webview不要超过3个,隐藏在后台的webview不要超过10个
流畅度:飘nview图>飘webview>飘div。
-
示例介绍
新闻类app,启动首先载入资讯列表list页面,然后后台创建了一个隐藏的webview,加载了一个内容模板content页面。
点击list页面的一个新闻item时,调用webview的窗体控制动画,把content页面侧滑进屏幕。 但content页面仅仅是一个模板而没有数据,在content页面刚侧滑进屏幕时,在content页面有一个“加载中”的提示。
紧接着content页面开始执行ajax请求,联网加载数据并显示出来。
我们可以在list页面的item点击里,一边移动窗体,一边通知新页面执行ajax。webview间相互传递消息使用mui.fire()方法。流畅度终极扩展
预截图的能力HTML5+也是提供了的,高手可以适时使用。
预加载虽然可以避免白屏的发生,但窗体动画有时不流畅,有些新窗体移入过程中,还在不停联网获取数据,不停重绘界面,导致窗体进入动画感觉卡顿,此时还有一个高级技巧是截图动画。5+ runtime提供了一个plus.nativeObj.Bitmap的对象,同时webview对象提供了一个截图方法,可以把webview显示区域保存到bitmap对象中。此外webview的动画方法中支持传bitmap,这样给开发者提供了一个性能调优的手段。
我们可以预载一个webview,然后把这个webview预先截图下来,然后在窗体移入时在动画参数里传入保存这个截图的bitmap对象,这样窗体移动时,移动的就不是webview,而是移动的图片,这样能让窗体动画流畅许多。
动画使用
pop-in是前后2个窗体联动挤压式动画,新窗体进入时,老窗体有被挤压的感觉。
这种动画体验,比slide-in-right的只有一个webview从右侧移动进来更动感。pop-in配合预载的效果更好
如果页面预加载了,pop-in会非常顺滑。如果页面没有预载,且页面非常复杂,那么pop-in的动画启动速度可能会比slide-in-right动画慢。
有些页面css写的不好,会二次渲染,即开始时页面显示一个样子,很快页面被二次渲染显示成另一个样子。这种问题以前在slide-in-right动画上不明显,但在pop-in动画上会明显暴露出来。
当然如果不预载,也还有一种处理方式,就是点击准备切换新窗体时,先转个雪花,等新窗体在后台渲染完毕,然后在调用pop-in动画移入屏幕。如果使用的是nativeobj的view做动画,那不会有性能问题,也没有需要注意的地方。
原生UI的设计目的
HTML和css有一个优势就是灵活的样式设计。
在大多数情况下,我们都应该使用HTML+css来负责UI。但是有些情况下,我们发现HTML+css的UI不满足需求。
绝对置顶
HTML的video等元素,以及5+的map等原生元素,这些原生控件的层级高于div。
对于一些弹出的需要置顶的控件,会造成div模式的控件无法绝对置顶,就像在web开发里弹出的div被flash遮住一样。
使用div方式开发的如下弹出控件:alert、confirm、actionSheet、waiting、date、time、prompt、toast,都存在这个问题。
为此,HTML5+扩展了上述native级别的UI控件,保证可以绝对置顶。跨webview
如果界面使用webview方式的tab选项卡,但想从底部弹出一个菜单actionsheet,此时使用div方式的弹出菜单由于无法跨webview,只能看到一部分。
此时就需要使用nativeUI里的actionsheet才能跨webview。全屏遮罩
弹出控件时,需要对整个屏幕的其他部分做阴影遮罩。
使用div遮罩,同样无法蒙住video、map等原生控件,也无法跨webview。
而且原生的遮罩还可以蒙住手机顶部状态条,这都是div遮罩做不到的。
HTML5+扩展的nativeUI控件,保证可以全屏遮罩。
注意:
组件使用,尽量原生 不用MUI的
actionSheet:弹出系统选择按钮框
alert: 弹出系统提示对话框
confirm: 弹出系统确认对话框
closeWaiting:关闭系统等待对话框
showWaiting: 显示系统等待对话框
pickDate: 弹出系统日期选择对话框
pickTime: 弹出系统时间选择对话框
prompt弹出系统输入对话框
toast: 显示自动消失的提示消息