HybirdApp知识点整理（MUI配合H5+开发）

开发规范

• 页面渲染尽量不用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不满足需求。

1. 绝对置顶
   HTML的video等元素，以及5+的map等原生元素，这些原生控件的层级高于div。
   对于一些弹出的需要置顶的控件，会造成div模式的控件无法绝对置顶，就像在web开发里弹出的div被flash遮住一样。
   使用div方式开发的如下弹出控件：alert、confirm、actionSheet、waiting、date、time、prompt、toast，都存在这个问题。
   为此，HTML5+扩展了上述native级别的UI控件，保证可以绝对置顶。

2. 跨webview
   如果界面使用webview方式的tab选项卡，但想从底部弹出一个菜单actionsheet，此时使用div方式的弹出菜单由于无法跨webview，只能看到一部分。
   此时就需要使用nativeUI里的actionsheet才能跨webview。

3. 全屏遮罩
   弹出控件时，需要对整个屏幕的其他部分做阴影遮罩。
   使用div遮罩，同样无法蒙住video、map等原生控件，也无法跨webview。
   而且原生的遮罩还可以蒙住手机顶部状态条，这都是div遮罩做不到的。
   HTML5+扩展的nativeUI控件，保证可以全屏遮罩。

注意：
组件使用，尽量原生 不用MUI的
actionSheet：弹出系统选择按钮框
alert: 弹出系统提示对话框
confirm: 弹出系统确认对话框
closeWaiting：关闭系统等待对话框
showWaiting: 显示系统等待对话框
pickDate: 弹出系统日期选择对话框
pickTime: 弹出系统时间选择对话框
prompt弹出系统输入对话框
toast: 显示自动消失的提示消息

数据传递

• 点击即可