【示例】原生标题栏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配置

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

2 分享 关注
SixGodWill 2466285359@qq.com
天使中的魔鬼

天使中的魔鬼 回复 DCloud_UNI_Trust

请问怎么获取原生标题对象中的按钮对象中的text的值啊?
0 赞 2019-01-14 14:46
波克比

波克比

原生标题栏文字不能设置加粗样式~~
0 赞 2018-12-19 15:18
波克比

波克比 回复 smallwl@163.com

还有原生标题栏文字不能设置加粗样式
0 赞 2018-12-19 15:17
254585709@qq.com

254585709@qq.com

点击返回按钮 当前页面收起后 会触发上一个页面的返回按钮 锤子手机
0 赞 2018-03-22 09:28
DCloud_UNI_Trust

DCloud_UNI_Trust 回复 1214967090@qq.com

单独发布个问题,上传个测试工程,把问题地址贴一下。
0 赞 2018-01-24 17:05
1214967090@qq.com

1214967090@qq.com

我使用标题栏的返回按钮,并且页面设置有ios侧滑功能,发现,在ios上返回按钮点击无效果,是被侧滑屏蔽了吗?
0 赞 2018-01-24 16:54
秋天无风

秋天无风

setStyle无法更改标题,官方例子【列表到详情最佳实践】中的也是!
0 赞 2018-01-21 08:21
Jonny515688

Jonny515688

刚回复了另外一个贴:同样的问题,我在这边在回一贴,希望能帮助到遇到该问题的伙伴们:

解决android系统下,标题不更新情况,可以看官方给得API:如下
titleText: (String 类型 )标题栏控件的标题文字内容
在标题栏控件居中(水平和垂直)显示,左右边距为88px,如果文本过长则尾部裁剪(加三个点"...")显示。
### 当不设置titleText属性或属性值为undefined/null时,使用当前Webview窗口加载页面的标题,并自动同步更新页面的标题。
###
主要就是这一句话,可以动态修改页面的<title>new title</title>
这样标题就变了,真是看瞎了眼
2 赞 2018-01-20 22:42
Jonny515688

Jonny515688 回复 christie.liu@qq.com

试过了,还是没有用
0 赞 2018-01-20 22:25
Jonny515688

Jonny515688 回复 609015534@qq.com

ios下可以,我这边android各种不行
0 赞 2018-01-20 22:24
指尖上的代码

指尖上的代码

draw图片的时候不能倒圆角的吗?我看文档没有啊
0 赞 2018-01-11 09:30
zb305107@163.com

zb305107@163.com 回复 christie.liu@qq.com

这方法不行。。。会和之前的标题重叠,之前的标题清除不了
0 赞 2018-01-03 10:39
christie.liu@qq.com

christie.liu@qq.com

关于webview标题不变的问题,可以通过
webview_detail.getTitleNView().reset();
webview_detail.getTitleNView().drawText('你要设置的标题文本',{},{color:'#FFFFFF'});
来处理。
0 赞 2018-01-01 22:33
609015534@qq.com

609015534@qq.com

var wv = plus.webview.currentWebview();
wv.setStyle({
titleNView: {
titleText: '标题'
}
});
这种方式,修改原生标题,第一次修改有效,第二次修改标题就不会刷新了,
2 赞 2017-12-21 21:27
老哥教教我

老哥教教我 回复 810726685@qq.com

我已经换div导航了!感觉性能更好了!
0 赞 2017-09-19 12:21
810726685@qq.com

810726685@qq.com 回复 老哥教教我

同问,你现在知道怎么解决了吗??
0 赞 2017-09-19 10:39
老哥教教我

老哥教教我

manifest.json文件中配置的原生导航栏 titletext 导航栏标题文字内容 怎么动态修改,用重绘以前文字就还在那里,覆盖了,有没有动态修改 导航栏标题文字内容方法
1 赞 2017-09-14 07:09
月球上的人

月球上的人 回复 DCloud_UNI_Trust

请问一下获取不到的bug修复了吗,我这里还是拿不到
0 赞 2017-09-12 18:07
月球上的人

月球上的人 回复 yaoge.xy@gmail.com

你好请问你获取到了吗
0 赞 2017-09-12 17:57
月球上的人

月球上的人 回复 czx517625126@163.com

你好请问你获取到了吗
0 赞 2017-09-12 17:50
月球上的人

月球上的人 回复 yeetong

你好请问你获取到了吗
0 赞 2017-09-12 17:49
smallwl@163.com

smallwl@163.com

内容失实或很久没更新了。其实可以将titleNviewSTYLE参数全部导进去。而不是仅仅三个。现在就是高度调不了,能调就爽了。

"navigationbar": {
"titletext": " ",
"titlecolor": "#000000",
"autoBackButton":true, //标题栏控件是否显示左侧返回按钮
"backgroundColor":"#F7F7F7", //标题栏控件的背景颜色
"type":"transparent",//"default" - 默认样式,顶部停靠显示,挤压Webview页面内容显示区域; "transparent" - 透明样式
"splitLine":{"color":"#F0AD4E","height":"1px"}
},
1 赞 2017-09-02 14:30
沙子

沙子

发现一个问题,貌似标题没有居中
0 赞 2017-08-15 14:47
yeetong

yeetong

我也获取不到。急需要。怎么办。一直是null。延迟5秒也没法获取。
0 赞 2017-05-04 20:39
czx517625126@163.com

czx517625126@163.com 回复 SixGodWill

我也是undefined,怎么解决
0 赞 2017-04-28 15:49
czx517625126@163.com

czx517625126@163.com

navigationbar,我想问一下,这个沉浸式的话,paddingtopZ怎么解决
0 赞 2017-04-20 15:46
dongs

dongs 回复 SixGodWill

同样的问题,你那边最后怎么解决的?
0 赞 2017-04-20 12:59
446776231@qq.com

446776231@qq.com 回复 yaoge.xy@gmail.com

首页的需要在 manifest.json中配置
1 赞 2017-03-24 15:02
yaoge.xy@gmail.com

yaoge.xy@gmail.com

延迟后也获取不到,还是undefined 新版本什么时候发布?
0 赞 2017-03-20 05:32
DCloud_UNI_Trust

DCloud_UNI_Trust 回复 SixGodWill

需要稍加延迟即可获取,此bug下次发版修复。
1 赞 2017-03-17 17:04
SixGodWill

SixGodWill 回复 DCloud_UNI_Trust

新页面getNavigationbar()方法取不到导航栏对象,一直是undefined。
0 赞 2017-03-13 08:34
DCloud_UNI_Trust

DCloud_UNI_Trust 回复 SixGodWill

参考hello mui示例工程的index.html,以及nativeObj相关的API。
http://www.html5plus.org/doc/zh_cn/nativeobj.html
0 赞 2017-03-12 12:23
SixGodWill

SixGodWill

用mui.openWindowWithTitle()方法打开新页面之后,怎么绘制右上角的按钮
0 赞 2017-03-11 16:42

要回复文章请先登录注册