【示例】使用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的使用，如果大家在实际开发中，有更好的应用例子，欢迎在社区中分享学习交流。

最后附上源码