【示例】使用nativeView绘制窗口的导航栏

应用场景

HBuilder8.0重大更新中提到,非必要不推荐使用同屏多webview中的title场景。
过去使用了父子webview模式,现在推荐使用nativeView方案,可以进一步提升应用整体性能。

具体实现

创建nativeView

参考相关文档原生控件对象

// 创建nativeView  
var headView = new plus.nativeObj.View('test_view', {  
    height: '45px',  
    position: 'dock',  
    dock: 'top'  
});  

这里需要注意,将position设置为dock,并且dock设置为top。这样,nativeView就会在整个webview的最上方,并且挤压webview的高度。

绘制标题

参考相关文档绘制文本

// 绘制标题  
headView.drawText('title', {}, {  
    color: '#000000',  
    size: '16px'  
});  

这里的目标区域,采用默认的整个view的区域即可。

设置背景颜色

参考相关文档绘制矩形区域

// 绘制背景颜色  
headView.drawRect('#ffffff');  
// 绘制边框  
headView.drawRect('#ff0000', {  
    top: '44px',  
    height: '1px'  
});  

绘制icon

参考相关文档绘制图片
这里以绘制back箭头为例

// 绘制back箭头  
var backIcon = new plus.nativeObj.Bitmap('icon_back');  
var BACK_BASE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAb1BMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8AAACubimgAAAAI3RSTlMAGfUTGfQTGPMSGPIYGhgaGBsXGxcbFxwXHBccFhwWHRYdHWufDPQAAAABYktHRACIBR1IAAAAB3RJTUUH4QETEBwooeTlkQAAAJVJREFUSMft1EkSgkAQRNFGUXFWHBDBibr/HTUwD5B/48Ig1y+io7u6MqUhf5hsNEY+j5hMgZ/FJ8Xc9ovos3T96utjbfqN/Nb0O/m96Uv5g+mP8ifTn+Ur01/ka9Nf5RvTt/I309/lH6Z/yr9Mn+Q71/MT8B34K/E58Enzv8R/K98HvnF8p3lr8F7izce7lbf3kJ/lDQp9HdBhgg3PAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTE5VDE2OjI4OjQwKzA4OjAwpTDFwQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0xOVQxNjoyODo0MCswODowMNRtfX0AAAAASUVORK5CYII=';  
backIcon.loadBase64Data(BACK_BASE, function() {  
    headView.drawBitmap(backIcon, {}, {  
        width: '25px',  
        height: '25px',  
        top: '10px',  
        left: '5px'  
    });  
});  

如果需要绘制其它更多的icon等内容,可以根据需求继续添加。

事件监听

参考相关文档添加事件监听器
这里以click事件为例

// 事件监听  
headView.addEventListener('click', function(e) {  
    var x = e.clientX;  
    console.log('触摸目标在view控件中的x坐标:' + x);  
});  

事件对象中,主要用到的属性就是clientX,其它更多属性请参考文档说明。

添加至webview

nativeView创建完成后,需要添加到webview上,有些属性才会生效,例如:dock等。

plus.webview.currentWebview().append(headView);  

通用方法

看完上面的例子,可能很多小伙伴会觉得步骤很多,操作很繁琐。
这里提供一个简单的封装的方法,适用于部分场景,实际开发中还是要自己根据需求进行进一步的定制。
参数说明:

{  
    "id": "nativeView的id",  
    "height": "导航栏高度",  
    "title": "标题",  
    "titleColor": "标题文字颜色",  
    "fontSize": "标题字体大小",  
    "backgroundColor": "导航栏背景颜色",  
    "borderColor": "导航栏边框颜色",  
    "back": "是否绘制back箭头,Boolean"  
}  

详细的方法,请见附件中的demo.html。

更多

为了方便开发者使用,html5plus还提供了titleNView方案,并且mui也提供了相应的扩展方法。
参考原生导航栏控件titleNView使用说明以及打开带原生导航栏的新页面

关于nativeObj的使用,如果大家在实际开发中,有更好的应用例子,欢迎在社区中分享学习交流。

最后附上源码

4 分享 关注
lhyh 417498289@qq.com DCloud_UNI_Neil sosoyz@gmail.com
361694192@qq.com

361694192@qq.com

如何画一个 圆角的 图片
0 赞 2018-12-19 15:32
所谓

所谓

这个是不是 被新的方法mui.openWindowWithTitle 给取代了呀
1 赞 2017-08-01 10:02
yooluo@qq.com

yooluo@qq.com 回复 tt0668

百度找个网站转换一下就好了
0 赞 2017-06-28 18:08
tt0668

tt0668 回复 DCloud_UNI_Trust

请问如何得到icon 的base64 编码
0 赞 2017-04-26 18:53
czx517625126@163.com

czx517625126@163.com

这个会不会存在沉浸式导航栏的问题,需要怎么设置
0 赞 2017-04-11 09:00
DCloud_UNI_Trust

DCloud_UNI_Trust 回复 446776231@qq.com

可以的。
0 赞 2017-03-28 11:08
446776231@qq.com

446776231@qq.com

这个能用来绘制底部菜单栏么?
0 赞 2017-03-28 11:04

要回复文章请先登录注册