【示例】原生标题栏titleNView使用说明

概念澄清

HBuilder8.0.1版更新说明中App模块【重要】更新，新增原生导航栏控件。
titleNView在js层也是nativeObj.View对象，可再次自由绘制定义。建议非必要不使用双webview模式的webview title，而改用原生title。
以往，为了解决列表流畅滚动等问题，采用了双webview模式等方案。现在有了titleNView后，可以减少webview的数量，进而大幅提高应用的整体性能。

titleNView规范地址：**http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

实际使用

可用属性

目前只有三个属性可以配置

1. backgroundcolor 导航栏背景颜色，字符串类型，格式为“#RRGGBB”，默认值为灰黑色（#1B1A1F）
2. titletext 导航栏标题文字内容，默认值为当前应用的标题； titlecolor：导航栏标题文字颜色，字符串类型，格式为“#RRGGBB”
3. titlecolor 导航栏标题文字颜色，字符串类型，格式为“#RRGGBB”，默认值为白色（#FFFFFF）

ps：注意属性的大小写。并且高度是固定的，为44px。

首页配置

首页的titleNView需要在manifest.json文件中配置。
plus->launchwebview->titleNView

"plus": {  
    "launchwebview": {  
        "titleNView": {  
            "backgroundcolor": "#f7f7f7",  
            "titletext": "首页",  
            "titlecolor": "#ff461f"  
        }  
    }  
}  

非首页webview

该属性必须在创建webview时就设置，不支持动态setStyle修改。

var homeWv = plus.webview.create('home.html', 'home', {  
    titleNView: {  
        titleText: 'home页'  
    }  
});  
homeWv.show('slide-in-right');  

mui扩展

mui.openWindow({  
    url: 'home.html',  
    id: 'home',  
    styles: {  
        titleNView: {  
            titleText: 'home页'  
        }  
    }  
})  

补充
titleNView的高度是固定的，为了方便开发者，mui-v3.5.1开始提供了更为灵活的方案。

mui.openWindowWithTitle(WebviewOptions,{  
    title:{//标题配置  
        text:'home页',  
    },  
    back:{//左上角返回箭头  
        image:{//图片格式  
            base64Data:''//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头  
        }  
    }  
});  

关于openWindowWithTitle方法，请参考mui相关文档。

获取titleNView对象

通过getTitleNView()方法，可以获取webview窗口的原生标题栏对象。

var titleNView= plus.webview.currentWebview().getTitleNView();  

添加button

可以通过直接配置titleNView的buttons实现icon的绘制以及click事件的监听，参考文档http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewCustomButtonStyles
以及这篇文章内置浏览器titleNView版

修改titleText

var wv = plus.webview.currentWebview();  
wv.setStyle({  
    titleNView: {  
        titleText: '标题'  
    }  
});

绘制更多内容

更新说明中提到，titleNView在js层是nativeObj.View对象，可以通过相关方法进行更多内容的绘制。
最新的Hello Mui示例工程，首页的icon的绘制就是这样实现的，在最新的HBuilder中新建Hello Mui示例工程即可体验并查看相关源码。

更多

更多关于HBuilder8.0的更新，以及manifest.json的配置，参考相关文章。
感谢80万开发者厚爱，HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码，解压后真机运行即可。