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.clearTop |
Boolean |
optional |
新开页面后,是否关闭除了新页面之外的所有其他页面 |
options.success |
Function |
optional |
调用成功的回调函数 |
options.error |
Function |
optional |
调用失败的回调函数 |
API 响应结果
名称 |
类型 |
是否必须返回 |
含义 |
result |
Object |
|
响应对象 |
result.errorCode |
Number |
|
错误码,成功为0,失败为非0 |
result.errorMsg |
String |
|
错误信息 |
result.data |
Object |
optional |
新页面返回的数据(如果是请求下一个页面的时候) |
调用示例
QN.navigator.push({
url: 'http://www.taobao.com',
title: '新开页面标题~~',
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);
});
添加导航栏自定义按钮
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',
},
success(result) {
console.log(result);
},
error(error) {
console.log(error);
}
}).then(result => {
console.log(result);
}, error => {
console.log(error);
});
移除导航栏自定义按钮
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',
},
success(result) {
console.log(result);
},
error(error) {
console.log(error);
}
}).then(result => {
console.log(result);
}, error => {
console.log(error);
});
清除导航栏自定义按钮
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);
});
添加导航栏菜单列表中自定义菜单项
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',
},
success(result) {
console.log(result);
},
error(error) {
console.log(error);
}
}).then(result => {
console.log(result);
}, error => {
console.log(error);
});
移除导航栏菜单列表中自定义菜单项
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',
},
success(result) {
console.log(result);
},
error(error) {
console.log(error);
}
}).then(result => {
console.log(result);
}, error => {
console.log(error);
});
清除导航栏菜单列表中自定义菜单项
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);
});
QN.navigator.setSwipeBack(options)
启用/禁用iOS下页面的左滑返回,页面加载时默认为启用。
API 调用入参
名称 |
类型 |
是否可选 |
含义 |
options |
Object |
|
选项 |
options.query |
Object |
optional |
接口调用参数 |
options.query.enable |
Boolean |
optional |
是否启用左滑返回 |
options.success |
Function |
optional |
调用成功的回调函数 |
options.error |
Function |
optional |
调用失败的回调函数 |
API 响应结果
名称 |
类型 |
是否必须返回 |
含义 |
result |
Object |
|
响应对象 |
result.errorCode |
Number |
|
错误码,成功为0,失败为非0 |
result.errorMsg |
String |
|
错误信息 |
调用示例
QN.navigator.setSwipeBack({
query: {enable: false},
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 列表