网页头部

通常我们访问一个非全屏的轻应用，往往需要对头部功能进行设置，该模块提供自定义标题及左右按钮的能力。

提示

当访问一个轻应用时，移动端仅打开一个 WebView，也就是头部只会有一个，此时所有的设置都是作用在同一个头部上。例如常见的单页面应用（SPA）开发，前端页面的切换时，都需要修改标题。且为了确保应用的可用性，设置返回按钮事件时请谨慎处理。

设置标题

更换头部 title。

使用说明

客户端	Android	iOS
支持情况	支持	支持

w6s.header.setTitle('test title');

初始标题

打开一个页面，标题通常默认取自 html 页面上的 title 标签的内容，如果希望初始不显示任何标题内容，可以将 title 内容设置如下：

html

<title>$No_Title$</title>

这是一个约定好的标签内容，若设置，标题将显示空白。

设置返回按钮动作

更换左侧的返回按钮动作。

使用说明

客户端	Android	iOS
支持情况	支持	支持

w6s.header.leftButton(
  method: 'goBack',
});

参数说明

参数	类型	说明
method	String	点击左边返回按钮需要执行的方法名

提示

传入的方法名，必须在全局上能找到，否则无法触发。通常我们把方法挂在window对象下，如果使用webpack构建工具来开发，要特别注意这个问题。

还原返回按钮事件

清除左侧按钮事件和显示。

使用说明

客户端	Android	iOS
支持情况	支持	支持

w6s.header.clearLeftButton();

锁定网页顶部栏

锁定顶部栏，使得顶部栏按钮无效。

使用说明

客户端	Android	iOS
支持情况	支持	支持

// 锁定
w6s.header.navigation.lock();

// 解锁
w6s.header.navigation.unlock();

设置右侧按钮动作

自定义右侧按钮，最多允许在右边定义三个按钮，每个按钮允许定义成下拉类型，下拉没有数量限制，但建议不超过 5 个。

使用说明

客户端	Android	iOS
支持情况	支持	支持

右键导航功能格式：

json

[
  {
    "icon": "1",
    "title": "更多",
    "action": "list",
    "value": ""
  },
  {
    "icon": "2",
    "title": "拍照",
    "action": "js",
    "value": "photo"
  },
  {
    "icon": "1",
    "title": "下一步",
    "action": "js",
    "value": "next"
  },
  {
    "icon": "3",
    "title": "刷新",
    "action": "system",
    "value": "refresh"
  }
]

上述为定义一个按钮的 JSON 格式，是由一个数组组成；格式采用流水式布局，即数组中的第一个定义，为按钮本身的定义，它可以List，Js，System三者之一。

可定义包含三种行为：

List 下拉组件，表示点击会弹出一个 popview，只能在一级菜单中定义，在二级菜单中无效；
JS 调用 HTML 页面中的 JS 全局方法；可在一级，二级菜单中定义；
System 系统事件；内置的一些系统行为，比如刷新，分享等，可在一级，二级菜单中定义；

调用方法，每个按钮为一个数组:

w6s.header.rightButtons({
  items: [
    [
      {"icon": "1", "title": "更多", "action": "list", "value": ""},
      {"icon": "2", "title": "aaa", "action": "js", "value": "aaa"},
      {"icon": "1", "title": "bbb", "action": "js", "value": "bbb"}
    ],
    [ 
      {"icon": "1", "title": "下一步", "action": "js", "value": "next"} 
    ]
  ],
});

如上，定义了两个右键按钮，第一个为更多，它是一个下拉式按钮，用户点击时，会出现 aaa、bbb 两个选项，用户点击 aaa 时,会调用页面的 aaa 方法，点击 bbb 时，用调用 bbb 方法。

另一个是下一步按钮，这是个 JS 事件按钮，用户点击下一步时，会直接调用页面中的 JS（next）方法。

系统默认行为事件

系统行为有自己的默认图标，如用户未指定文字或图标，使用默认图标，否则使用用户指定的图标或文字（图片优先）。

Action	行为
Refresh	刷新当前页面
Share	分享
Close	关闭

按钮图标规则

目前支持两种规则：

使用系统内置图标，如下表；
使用 base64，此时 icon 取值为 "icon": "base64:xxxxxx"。

以下为系统内置图标：

图标编号	图标	图标编号	图标
0		1
2		3
4		5
6		7
8		9
10		11
12		13
14		15
16

以上图片均为白色，透明背景（为显示效果做了灰色背景处理）。

json

{
  "icon": "2",
  "title": "刷新",
  "action": "system",
  "value": "refresh"
}

如上述定义，表示将使用图标编号为2的图标，也就是 icon3

清除右侧按钮

清除右侧按钮事件和显示。

使用说明

客户端	Android	iOS
支持情况	支持	支持

w6s.header.clearRightButtons();

设置左侧的按钮和关闭

是否隐藏或显示左侧的按钮和关闭字样。

使用说明

客户端	Android	iOS
支持情况	支持	支持

w6s.header.visibleLeftButton({
  showBack: false,
  showClose: false,
});

参数说明

参数	类型	说明
showBack	Boolean	是否显示`返回`按钮图标
showClose	Boolean	是否显示`关闭`文字

修改顶部栏颜色

时间和电量的那一栏（最顶上），而Header部分的颜色，需要在后台添加应用的时候设置。

该方法无需调用接口，在 html 页面的<head>标签里添加该标签即可，其中 content 的内容必须为 HEX 格式（以井号开头）。

html

<meta name="_navigation_color" content="#194c7b" />

获取顶部状态栏高度

可以通过navigator.userAgent获取顶部状态栏的高度，APP 会在窗口的 userAgent 中加入statusBar/xx的属性，如下：

Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 workplus/4.11.6 statusBar/44 en

该属性常用于处理全面屏或刘海屏的顶部高度适配，特别是在开发沉浸式页面时。

显示搜索栏

让原生头部变成一个搜索框。

使用说明

客户端	Android	iOS
支持情况	`v4.10.0+`	`v4.10.0+`

w6s.header.showSearchBar({
  hint: '请输入关键字',
  cancelMode: 'reset',
  success: function(res) {},
  fail: function(err) {},
});

参数说明

参数	类型	说明
hint	string	搜索时，输入框的 placeholder
cancelMode	reset\|back\|custom	取消按钮的行为，可不传，默认为 reset。具体说明请看下方。

关于 cancelMode 的说明:

reset 表示点击取消时，隐藏搜索栏，还原回去；
back 表示点击取消时，表现为同返回按钮一样的行为；
custom 表示点击取消时，完全交由前端管理维护，原生不会触发任何行为。

返回数据

参数	说明
action	表示用户的动作，包括以下行为：input、search 及 cancel
content	搜索栏输入的内容

关于回调的触发：

会触发回调的行为，有以下三种：

用户在搜索栏输入内容，此时会触发 success 回调，并返回上述数据，action 为 input；
用户点击键盘的搜索按钮，此时会触发回调，action 为 search；
用户点击取消按钮，此时会触发回调，action 为 cancel。

注意，在输入搜索内容有变化时，回调会马上被触发，此时执行搜索，应做好防抖处理。

隐藏搜索栏

针对显示搜索栏接口，用于隐藏搜索栏。

仅对执行显示搜索栏接口后出现的搜索框有效！

使用说明

客户端	Android	iOS
支持情况	`v4.10.0+`	`v4.10.0+`

w6s.header.hideSearchBar();

网页头部 ​

设置标题 ​

设置返回按钮动作 ​

还原返回按钮事件 ​

锁定网页顶部栏 ​

设置右侧按钮动作 ​

系统默认行为事件 ​

按钮图标规则 ​

清除右侧按钮 ​

设置左侧的按钮和关闭 ​

修改顶部栏颜色 ​

获取顶部状态栏高度 ​

显示搜索栏 ​

隐藏搜索栏 ​

网页头部

设置标题

设置返回按钮动作

还原返回按钮事件

锁定网页顶部栏

设置右侧按钮动作

系统默认行为事件

按钮图标规则

清除右侧按钮

设置左侧的按钮和关闭

修改顶部栏颜色

获取顶部状态栏高度

显示搜索栏

隐藏搜索栏