# 网页头部

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

提示

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

# 设置标题

更换头部 title。

使用说明

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

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

初始标题

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

<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
支持情况 支持 支持

右键导航功能格式:

[
  {
    "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 格式,是由一个数组组成;格式采用流水式布局, 即数组中的第一个定义,为按钮本身的定义,它可以ListJsSystem三者之一。

可定义包含三种行为:

  1. List 下拉组件,表示点击会弹出一个 popview,只能在一级菜单中定义,在二级菜单中无效;
  2. JS 调用 HTML 页面中的 JS 全局方法;可在一级,二级菜单中定义;
  3. 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 关闭

# 按钮图标规则

目前支持两种规则:

  1. 使用系统内置图标,如下表;
  2. 使用 base64,此时 icon 取值为 "icon": "base64:xxxxxx"。

以下为系统内置图标:

图标编号 图标 图标编号 图标
0 icon1 1 icon2
2 icon3 3 icon4
4 icon5 5 icon6
6 icon7 7 icon8
8 icon9 9 icon10
10 icon11 11 icon12
12 icon13 13 icon14
14 icon15 15 icon16
16 icon17

以上图片均为白色,透明背景(为显示效果做了灰色背景处理)。

{
  "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 格式(以井号开头)。

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

# 显示搜索栏 v4.10.0+

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

使用说明

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

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 搜索栏输入的内容

关于回调的触发:

会触发回调的行为,有以下三种:

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

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

# 隐藏搜索栏 v4.10.0+

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

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

使用说明

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

w6s.header.hideSearchBar();