# navigator

众所周知，在浏览器里，我们可以通过前进或者回退按钮来切换页面，iOS/Android 的 navigator 模块就是用来实现类似的效果的。

# API

# push

把一个 小程序 页面URL压入导航堆栈中，可指定操作完成后需要执行的回调函数

# push(options, callback)

• @options {Object}：选项参数
  • page {string}：要压入的 小程序 页面的地址
  • title {string}：新页面的标题
  • pageParams {string}：向新页面传递的参数。如果需要传递Object对象，则需要使用JSON.stringify(obj)进行转换。
  • finish {boolean}：是否关闭当前页。默认为false。
  • hideNavBar {boolean}：是否隐藏标题栏。默认为false，只有宿主小程序有此权限。
• @callback {Function}：执行完该操作后的回调函数。回调函数将收到一个字符串类型参数，用于告之函数执行结果。success为成功，failed为失败。

Demo

var navigator = weex.requireModule('navigator');
navigator.push({
    page: '/test.js',
    title: 'Demo',
    pageParams: JSON.stringify({test: 1})
});

# pop

把一个 小程序 页面 URL 弹出导航堆栈中，可指定操作完成后需要执行的回调函数。

# pop(options, callback)

• @options {Object}：选项参数对象
• @callback {Function}：执行完该操作后的回调函数。回调函数将收到一个字符串类型参数，用于告之函数执行结果。success为成功，failed为失败，

Demo

var navigator = weex.requireModule('navigator');
navigator.pop();

# setNavBarTitle

设置当前页面的标题

# setNavBarTitle(title)

• @title {string}：页面标题

Demo

var navigator = weex.requireModule('navigator');
navigator.setNavBarTitle('demo title' + parseInt(Math.random() * 100));

# showNavBarIndicator

显示标题栏加载动画

# showNavBarIndicator()

无参数

Demo

var navigator = weex.requireModule('navigator');
navigator.showNavBarIndicator();

# hideNavBarIndicator

隐藏标题栏加载动画

# hideNavBarIndicator()

无参数

Demo

var navigator = weex.requireModule('navigator');
navigator.hideNavBarIndicator();

# setBackButtonVisible

隐藏/显示导航栏返回按钮。

# setBackButtonVisible(visible)

• @visible {boolean}：true 表示显示返回按钮，false则隐藏

Demo

var navigator = weex.requireModule('navigator');
navigator.setBackButtonVisible(true);

# setNavBarHidden

隐藏/显示当前页面标题，只有宿主小程序有此权限。

# setNavBarHidden(options)

• @options {Object}：选项参数对象
  • hidden {number}：0 为显示标题栏 1为隐藏标题栏

Demo

var navigator = weex.requireModule('navigator');
navigator.setNavBarHidden({hidden: 1});

# addRightMenu

在标题栏上添加文字或图标按钮，只有宿主小程序有此权限。

# addRightMenu(options)

• @options {Object}：选项参数对象
  • type {string}：text 为文字类按钮 image为图标类按钮
  • value {string}：按钮的文本或图标的路径
  • tag {string}：按钮标识

Demo

var navigator = weex.requireModule('navigator');
var globalEvent = weex.requireModule('globalEvent');
var modal = weex.requireModule('modal');
navigator.addRightMenu({type: "text", value: "测试1", tag: "btn1"});
globalEvent.addEventListener('onRightMenuClicked', function(e) {
  const {tag} = e;
  if(tag == "btn1") {
    modal.toast({message: "测试1 clicked.", position: "bottom"});
  }
});

# setupTitleBarTheme

设置当前页面的标题样式。

# setupTitleBarTheme(options)

• @options {Object}：选项参数对象
  • navBarTintColor {string}：标题前景色，含字体、按钮颜色。格式为#FFFFFF
  • navBarRightBgColor {string}：右侧按钮容器背景颜色。格式为#FFFFFF
  • navBarRigntBorderColor {string}：右侧按钮容器边框颜色。格式为#FFFFFF
  • navBarRigntBorderWidth {number}：右侧按钮容器边框大小。
  • navBarRightSplitColor {string}：右侧按钮容器分隔线颜色。格式为#FFFFFF
  • navBarBgColor {string}：标题栏颜色。格式为#FFFFFF
  • statusBarBgColor {string}：状态栏颜色。格式为#FFFFFF
  • loaderTintColor {string}：加载动画前景色颜色。格式为#FFFFFF
  • statusBarDarkTint {boolean}：true状态使用黑色字体，否则为白色

Demo

var navigator = weex.requireModule('navigator');
navigator.setupTitleBarTheme({
    navBarTintColor: '#FF0000', // 标题字体颜色
    navBarRightBgColor: '#FFFFFF', // 右侧按钮容器背景颜色
    navBarRigntBorderWidth: 4, // 右侧按钮容器边框大小
    navBarRigntBorderColor: '#000000', // 右侧按钮容器边框颜色
    navBarRightSplitColor: '#FF0000', // 右侧按钮容器分隔线颜色
    navBarBgColor: '#1Ab700', // 标题栏颜色
    statusBarBgColor: '#17A05A', // 状态栏颜色
    loaderTintColor: '#AAAAAA',  // 加载动画前景色
});

# getPageParams

获取上一个页面传递的参数。

# getPageParams(callback)

• @callback {function}：执行完该操作后的回调函数。回调函数将收到一个response对象，对象的内容即为push时pageParams的参数值。

Demo

var navigator = weex.requireModule('navigator');
navigator.getPageParams(function (pageParams) {
	// your code
});

# getMpParams

获取当前小程序参数。

# getMpParams(callback)

• @callback {function}：执行完该操作后的回调函数。回调函数将收到一个response对象，对象内容如下：
  • mpid {string}：小程序唯一标识
  • mininame {string}：小程序名称
  • logo {string}：小程序图标
  • mpdesc {string}：小程序描述
  • companyname {string}：小程序所属主体
  • category {string}：小程序分类

Demo

var navigator = weex.requireModule('navigator');
navigator.getMpParams(function (mpParams) {
	// your code
});