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: 显示自动消失的提示消息

数据传递
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 南山桥边南山蓝, 九龙江水映山峦。 人潮纷纷彩虹桥, 独恋黄昏春江岸。 ————牧之戏蝶飛
    戏蝶飛阅读 204评论 0 4
  • 茉莉花香气浓郁,花朵洁白高雅,还可以清热去火,养颜美容。 茉莉花抗菌消炎,清热解毒。夏季炎热干燥,容易上火,一不小...
  • 似醉而醒的你 似醒而醉的我 醉醉醒醒间蹉跎你我 像风缠着雨却不懂云的泪滴 可我也知你从没真正怪我 原来过往的平凡 ...
    锚的舟阅读 255评论 0 3
  • 路很长 并不黑暗 丛丛野草 怎可能不成为羁绊 每条路 总是通向远方 也总是走向死亡的终点 没有人会走着走着 走到出...
    凭疯阅读 2,739评论 16 171