Navigator 导航

API 调用

QN.navigator.push(options) 或 QN.navigator.go(options)

打开/跳转页面

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.url String 需要跳转的URL
options.title Object optional 新页面的 title
options.query Object optional 跳转到 URL 时要传递的 query 参数
options.settings Object optional 设置项
options.settings.animate Boolean optional 切换时是否启用动画效果
options.settings.request Boolean optional 跳转是否要请求下一个页面返回数据
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

options.settings.request 为 true 时，说明跳转到新页面时希望新页面完成一些事务并返回数据。例如跳转到改价页面并返回改价结果。

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息
result.data Object optional 新页面返回的数据（如果是请求下一个页面的时候）

调用示例

QN.navigator.push({
    url: 'http://www.taobao.com',
    query: { x: 1, y: 2 },
    settings: {
        animate: true,
        request: true,
    }
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.pop(options) 或 QN.navigator.back(options)

关闭页面/后退

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object optional 接口调用参数
options.query.data Object optional 需要返回给前一个页面的数据
options.settings Object optional 设置项
options.settings.animate Boolean optional 切换时是否启用动画效果
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.pop({
    query: {
        data: {}
    },
    settings: {
        animate: true,
    }
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.reload(options);

刷新当前页面

API 调用入参

名称 类型 是否可选 含义
options Object optional 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.reload();

QN.navigator.reload({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.close(options);

关闭整个插件应用

API 调用入参

名称 类型 是否可选 含义
options Object optional 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.close();

QN.navigator.close({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.setTitle(options)

设置标题

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.title String 新标题
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.setTitle({
    query: {
        title: '我是标题'
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.showTitle(options)

显示标题

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.showTitle({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.hideTitle(options)

隐藏标题

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.hideTitle({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.addButton(options)

添加导航栏自定义按钮

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.iconName String optional 千牛客户端内置 icon 名称，内置 icon 列表参看本页附录
options.query.iconImg String optional 图标图片，URL 或 Base64（暂不支持 URL）
options.query.text String optional 图标文本，如果 iconName 和 iconImg 都没有值，则展示文本
options.query.tapEvent String 按钮点击时触发的事件，该事件为 Page 级别事件，可以使用 QN.on 进行监听，注意 tapEvent 不要与其他事件重复
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

iconImg 示例：

类型 示例 备注
URL http://www.icon.com/share.png
URL https://www.icon.com/share.png
Base64 iVBORw0KGgoAAAANSUhEUgAAAgAAAA...

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.addButton({
    query: {
        iconName: 'share',
        text: '分享',
        tapEvent: 'page.share', // 或 `share`
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.removeButton(options)

移除导航栏自定义按钮

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.tapEvent String 需要移除的按钮对应的事件（由于按钮事件事件是唯一的，因此也作为移除按钮的标识）
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.removeButton({
    query: {
        tapEvent: 'page.share', // 或 `share`
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.clearButtons(options)

清除导航栏自定义按钮

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.clearButtons();

QN.navigator.clearButtons({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.addMenuItem(options)

添加导航栏菜单列表中自定义菜单项

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.iconName String 千牛客户端内置 icon 名称，内置 icon 列表参看本页附录
options.query.iconImg String 图标图片，URL 或 Base64（暂不支持 URL）
options.query.text String optional 图标文本，如果 iconName 和 iconImg 都没有值，则展示文本
options.query.tapEvent String 按钮点击时触发的事件，该事件为 Page 级别事件，可以使用 QN.on 进行监听，注意 tapEvent 不要与其他事件重复
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

iconImg 示例：

类型 示例 备注
URL http://www.icon.com/share.png
URL https://www.icon.com/share.png
Base64 iVBORw0KGgoAAAANSUhEUgAAAgAAAA...

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.addMenuItem({
    query: {
        iconName: 'share',
        text: '分享',
        tapEvent: 'page.share', // 或 `share`
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.removeMenuItem(options)

移除导航栏菜单列表中自定义菜单项

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.query Object 接口调用参数
options.query.tapEvent String 需要移除的按钮对应的事件（由于按钮事件事件是唯一的，因此也作为移除按钮的标识）
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.removeMenuItem({
    query: {
        tapEvent: 'page.share', // 或 `share`
    },
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

QN.navigator.clearMenuItems(options)

清除导航栏菜单列表中自定义菜单项

API 调用入参

名称 类型 是否可选 含义
options Object 选项
options.success Function optional 调用成功的回调函数
options.error Function optional 调用失败的回调函数

API 响应结果

名称 类型 是否必须返回 含义
result Object 响应对象
result.errorCode Number 错误码，成功为0，失败为非0
result.errorMsg String 错误信息

调用示例

QN.navigator.clearMenuItems();

QN.navigator.clearMenuItems({
    success(result) {
        console.log(result);
    },
    error(error) {
        console.log(error);
    }
}).then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

导航栏预置事件

事件名称 含义 备注
page.back 返回按钮点击事件
page.close 关闭按钮点击事件
page.reload 刷新按钮点击事件

当用户操作时，预置事件由千牛客户端触发，你可以监听这些事件并拦截这些按钮的默认行为：

QN.on('page.back', function(data) {
    // 进行一些处理
    doSomeStuff();
    // 监听事件后，默认行为被拦截，因此要手动调用返回
    QN.navigator.pop();
});

附录

内置 icon 列表

icon 名称 样式 含义