DCloud_heavensoft
DCloud_heavensoft
  • 发布:2016-06-02 06:55
  • 更新:2024-02-02 14:16
  • 阅读:46045

plus.nativeObj.View解析

分类:HTML5+

HBuilder7.2起,提供了plus.nativeObj.View,简称nview,http://html5plus.org/doc/zh_cn/nativeobj.html,它是一个灵活的底层组件,可以通过js控制样式的原生画布,写字、贴图、做动画,它不属于dom,可盖在webview和各种原生控件上面。
业内有些人认为HTML5渲染不敌原生渲染,确实在非预载的情况下HTML渲染慢于原生,那nview其实就是纯原生渲染了,nview的出现,补齐了HTML5的短板,满足了对体验有苛刻要求的开发者。
合理运用nview的应用,其加载速度已经毫无逊色于原生应用,这里有些视频对比http://ask.dcloud.net.cn/article/12576

nview可灵活运用于多种情况。
举例:

  1. 更高性能的窗体切换动画
    我们知道div动画效果不好,webview的动画效果要好很多,但追求极致的话,nativeobj的动画是效果最好的。
    从HBuilder8.8起,提供了subnview。加载一个webview时,可以把webview的界面部分原生化。这样动画期间,其实webview是不渲染不移动的,移动的是原生绘制的subnview。
    subnview绘制极快,可以在100毫秒渲染,所以动画期间就能看到内容。而普通HTML文件渲染不预载的话是无法在100毫秒渲染的。
  2. 始终悬浮在webview上的圆球按钮
  3. 使用nativeObj.view来做title,不再使用父子双webview,节省更多内存资源,提升加载速度。此需求已经于HBuilder8.8起封装为webview的titleNView,可以在创建webview时配置一个参数,就可以生成一个nview的title,同时这个nview的title也可以继续使用nview的api进行文字图片的绘制。参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles
  4. 自定义原生控件
    扫码、地图...很多HTML5+里提供的原生控件,之前是难以自定义界面的,需要使用github上的5+runtime代码自己改源码、本地打包新引擎。有了nview,可以自由的在这些原生控件上贴图、写字、增加按钮,实现界面的自定义。
  5. 全屏遮罩
    子webview里的popover,弹出时无法全屏遮罩,其实我们可以不用popover的遮罩,直接用plus.nativeObj.View在popover四周贴蒙灰半透明图。
  6. webview选项卡上面多一个弧形
    以前,下图样式通过5+的webview选项卡并不好实现,或者改用div选项卡,或者在中间的webview底部fix一个图。

现在你可以创建一个原生的view放到选项卡中间,然后把圆球图贴进去,这个view是可以跨越webview的边界限制的。具体参考这个文章http://ask.dcloud.net.cn/article/12602

plus.nativeObj.View还支持点击事件,还可以在图上继续贴图,应用场景非常多。
plus.nativeObj.View可以盖在webview上面,从HBuilder7.3起,view还支持内嵌于webview,可跟随webview一起动。

plus.nativeObj.View的引入极大的提升了5+app的性能和ui自定义性,对父子双webview的使用产生很大替代作用,但注意mui封装过的父子webview是可以兼容到非5+的普通浏览器里使用的,而native view则必须依赖5+环境。

13 关注 分享
qmit holy1004 CNCrazyMoon 赵梦欢 绝列 Trust ___K Android_XR 8***@qq.com 菜鸡 x***@sina.com 1***@qq.com 绝学无忧

要回复文章请先登录注册

binladen

binladen

双webview不是用在上下拉刷新场景吗?
2017-05-06 09:46
8***@qq.com

8***@qq.com

请问,全屏遮罩是怎么实现的?
2017-04-06 10:46
gadget2k

gadget2k

回复 DCloud_heavensoft :
我已经新报问题了。代码也上传了。但是没人回复。能麻烦你看下吗?http://ask.dcloud.net.cn/question/28559
2017-02-27 13:02
gadget2k

gadget2k

回复 DCloud_heavensoft :
已经发了。请查看一下。
2017-02-18 09:25
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 gadget2k :
没看懂。。。建议新报一个问题,详细说明并提示示例代码,然后邀请@DCloud_mui_果汁
2017-02-18 07:06
gadget2k

gadget2k

回复 DCloud_heavensoft :
我在输入框onblur事件上用view.setstyle,发现top的设定不能让nview超过键盘顶部所在位置,否则即使键盘消失了,nview还是看不见。
2017-02-17 22:06
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 gadget2k :
如果nview被append到webview上,会跟webview一起动画,也会跟着一起show和hide,但不会跟着webview的resize变化,需要手动调位置。这块我们会再优化。
2017-02-17 02:43
gadget2k

gadget2k

回复 DCloud_heavensoft :
又遇到新问题了,append以后,能正常显示和隐藏了。但是,底部选项卡切换的时候,第一次总是会把中间的圆形按钮切掉上半个,来回切换才能恢复正常。还有,如果子页面里有输入框,点击后会把底部选项卡抬上去,那个圆形按钮居然就消失了。
2017-02-16 21:49
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 gadget2k :
把nview append到webview上
2017-02-14 10:24
gadget2k

gadget2k

回复 DCloud_heavensoft :
谢谢。问题解决。能再问一个问题吗?如何跟所在webview绑定呢?现在离开我就得写一句把它隐藏,back又得想着再显示出来。比较麻烦。可能我外行,想知道是不是有简便的方法,让这个view随着所在的webview隐藏和显示?
2017-02-14 08:25