titleNView配置 - wap2app教程

概述

\n

wap2app默认会以新窗体的方式打开每个要展现的url,每个新窗体默认都带有原生的导航栏。

开发者可以通过titleNView节点配置导航栏的背景色、标题内容、标题颜色、标题文字大小;wap2app默认生成灰底黑字的导航栏,参考sitemap.json中如下代码:

"global": {
"webviewParameter": {
"titleNView": {
"backgroundColor": "#f7f7f7",//导航栏背景色
"titleColor": "#000000",//标题颜色
"titleSize": "17px"//标题字体大小
}
}
}
\n

开发者可根据产品整体风格设置导航栏样式,比如希望黑底白字,则如下修改sitemap.json代码即可:

"global": {
"webviewParameter": {
"titleNView": {
"backgroundColor": "#1B1A1F",//黑色背景
"titleColor": "#FFFFFF",//白色文字
"titleSize": "17px"//标题字体大小
}
}
}
\n

如上设置为应用全局设置,开发者可以在页面组中为每个页面组单独设置,比如详情页面导航栏标题设置为“新闻详情”,如下:

{
"global": {
"webviewParameter": {
"titleNView": {//通用导航栏配置
"backgroundColor": '#1B1A1F',//导航栏背景色
"titleText": '我的项目',//导航栏标题
"titleColor": '#FFFFFF',//标题颜色
"titleSize": '17px'//标题字体大小
}
}
},
"pages": [
{
"webviewid":"detail",//详情页
"matchurls": [
{
"pathname": "R:\\/detail\\/\\d+"
}
],
"webviewParameter": {
"titleNView":{
"titleText":"新闻详情" //单独设置新闻详情页的标题内容
}
}
}
]
}
\n

在有原生导航条的情况下,wap站就不再需要显示HTML5导航栏,否则会出现原生、HTML5双标题并存的情况。

为避免双标题并存的情况,需要去除wap版的导航栏,参考wap站修改-去除M站的指定DOM元素教程。

原生导航条的启用/禁用

\n

可以通过配置titleNView为false,来禁用原生导航条。

wap2app项目首页默认不启用原生导航条,因此新建wap2app项目生成的sitemap.json中,首页下的titleNView配置为false,如下:

"pages": [
{
"webviewId": "__W2A__m.example.com",//首页
"matchUrls": [
{
"href": "http://m.example.com"
}, {
"href": "http://m.example.com/"
}
],
"webviewParameter": {
"titleNView": false //首页不使用原生导航条
}
}
]
\n

如果首页也需要原生导航条,则在首页的配置规则中,配置titleNView参数即可,例如:

"pages": [
{
"webviewId": "__W2A__m.example.com",//首页
"matchUrls": [
{
"href": "http://m.example.com"
}, {
"href": "http://m.example.com/"
}
],
"webviewParameter": {
"titleNView": {//首页启用原生导航条
"backgroundColor": "#FF00FF",//导航栏背景色
"titleColor": "#ffffff",//标题颜色为白色
"titleText":"wap2app项目首页"//导航条文本
}
}
}
]
\n

注意:在wap2app项目中:

  • 首页可以不使用原生导航
  • 其余非首页均建议使用原生导航
\n

title文字显示的专项说明

\n

如果配置了titleText,那么该Webview下match到的所有页面,都是这个title文字。
如果不配置titleText,则titleNView默认显示的标题文字就是网页的HTML里的<title>节点里的内容。
如果网页title的文字不适合显示到页面标题栏上,又不想使用固定文字,那么:
1. 常规建议是修改wap页面的title节点,在wap2app环境的ua下给出不一样的title。
2. 也可以在wap2app项目根目录下的app.js里编程,动态修改title文字。当然这种编程不止是能修改标题文字了。

初学者看到这里就基本掌握titleNView了。下面的章节为高级优化内容,初学时可以先不看,常用title配置不满足需求时,再来研究。

透明渐变导航栏

\n

wap2app框架提供了一种漂亮的导航栏样式,页面刚开始是顶部沉浸式图片,向下滚动后渐变出现title。
因为是动态效果,截图无法表达。
可以在流应用中点击唯品会的商品详情页面或大众点评的团购详情页面中体验。
也可以看这个视频第32-35秒:https://v.qq.com/x/page/k05051mc143.html
设置透明渐变导航栏,需要在titleNView节点下增加type:'transparent',如下是一个示例:

{
"webviewid":"detail",//详情页
"matchurls": [
//详情页url匹配规则
],
"webviewParameter": {
"titleNView":{
"titleText":"新闻详情", //单独设置新闻详情页的标题内容
"type":"transparent",//透明渐变样式
}
}
}
\n

(在唯品会示例中,除了'transparent'的titleNView,还使用了subNView里的原生ImageSlider)

完整的titleNView配置参数

\n

熟悉DCloud产品的开发者都知道,DCloud在手机端的核心强化引擎是HTML5+Runtime,它遵循HTML5Plus规范,提供了超级强大的功能。
而wap2app的底层引擎其实也是5+Runtime引擎。
wap2app里的titleNView就是HTML5Plus的Webview里的titleNView,功能非常强大。
更多配置可以参考HTML5Plus规范:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

通过js动态调整titleNView

\n

在wap2app项目根目录下有个app.js,这里可以通过js方法动态修改titleNView。
app.js的教程参考http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/12806

通过js获取titleNView对象的方法,参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.getTitleNView


3 分享
DCloud_客服_Trust 1233344@qq.com 513238368@qq.com
513238368@qq.com

513238368@qq.com

mark
0 赞 2017-08-26 17:24

要回复文章请先登录注册