Trust
Trust
  • 发布:2017-03-06 15:32
  • 更新:2023-06-18 17:42
  • 阅读:50318

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

分类:HTML5+

##概念澄清
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 2***@qq.com

要回复文章请先登录注册

4***@qq.com

4***@qq.com

笑死,这个标题 "titleNView": false,不管是设false还是true根本去不掉
2023-06-18 17:42
戒amorICant

戒amorICant

问一下,如果是左右俩个标题的,该怎么写
2020-09-24 14:25
天使中的魔鬼

天使中的魔鬼

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

波克比

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

波克比

回复 s***@163.com :
还有原生标题栏文字不能设置加粗样式
2018-12-19 15:17
2***@qq.com

2***@qq.com

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

Trust (作者)

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

1***@qq.com

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

秋天无风

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

Jonny515688

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

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