QinJs 官网 | QinJs 官网

qin.navigateTo(OBJECT)

qin.push 语法糖

保留当前页面，跳转到应用内的某个页面，使用 qin.navigateBack 可以返回到原页面。

OBJECT 参数说明

参数	类型	必填	默认值	说明
name	String	是		需要跳转的应用内非 tabBar 的页面的名字，强制匹配在 pages.json 中配置 routers 参数中的 name ，如果没有配置 name 是 url 首字母大写的驼峰。 navigator 组件不支持 name 方式跳转
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
params	Object	否	h5中的路径参数
query	Object	否	h5中的问号参数
events	Object	否		页面间通信接口，用于监听被打开页面发送到当前页面的数据。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
eventChannel	EventChannel	和被打开页面进行通信

示例

name 方式url 方式

//在起始页面跳转到 test.vue 页面并传递参数
qin.navigateTo({
  name: 'Home',
  params: {
    id: 1,
  },
  query: {
    name: 'qinjs',
  },
});

//在起始页面跳转到 test.vue 页面并传递参数
qin.navigateTo({
  name: 'Home',
  params: {
    id: 1,
  },
  query: {
    name: 'qinjs',
  },
});

//在起始页面跳转到 test.vue 页面并传递参数
qin.navigateTo({
  url: 'test?id=1&name=uniapp'
});

//在起始页面跳转到 test.vue 页面并传递参数
qin.navigateTo({
  url: 'test?id=1&name=uniapp'
});

qin.getPageOpts 接收onLoad 接收

export default {
  onLoad: () => {
    // 打印出上个页面传递的参数。
    // qin.getPageOpts 可在任意地方调用，获取页面参数
    console.log(qin.getPageOpts());
  },
  onShow: () => {
    // 打印出上个页面传递的参数。
    // qin.getPageOpts 可在任意地方调用，获取页面的参数
    console.log(qin.getPageOpts());
  },
}

export default {
  onLoad: () => {
    // 打印出上个页面传递的参数。
    // qin.getPageOpts 可在任意地方调用，获取页面参数
    console.log(qin.getPageOpts());
  },
  onShow: () => {
    // 打印出上个页面传递的参数。
    // qin.getPageOpts 可在任意地方调用，获取页面的参数
    console.log(qin.getPageOpts());
  },
}

// 在 test.vue 页面接受参数
export default {
  // option 为 object 类型，会序列化上个页面传递的参数
  onLoad: (option) => {
    // 打印出上个页面传递的参数。
    console.log(option.id);
    // 打印出上个页面传递的参数。
    console.log(option.name);
  },
}

// 在 test.vue 页面接受参数
export default {
  // option 为 object 类型，会序列化上个页面传递的参数
  onLoad: (option) => {
    // 打印出上个页面传递的参数。
    console.log(option.id);
    // 打印出上个页面传递的参数。
    console.log(option.name);
  },
}

跳转页面发送事件，同时监听返回来的数据接收数据并向上个页面发送数据

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
qin.navigateTo({
  url: '/pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: (theData) => {
      console.log(theData);
    },
    someEvent: (theData) => {
      console.log(theData);
    },
    ...
  },
  success: (res) => {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', {
      data: 'data from starter page',
    });
  },
});

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
qin.navigateTo({
  url: '/pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: (theData) => {
      console.log(theData);
    },
    someEvent: (theData) => {
      console.log(theData);
    },
    ...
  },
  success: (res) => {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', {
      data: 'data from starter page',
    });
  },
});

// 在test.vue页面，向起始页通过事件传递数据
onLoad: (option) => {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {
    data: 'data from test page',
  });
  eventChannel.emit('someEvent', {
    data: 'data from test page for someEvent',
  });
  // 监听 acceptDataFromOpenerPage 事件
  // 并获取上一页面通过 eventChannel 传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', (theData) => {
    console.log(theData);
  });
},

// 在test.vue页面，向起始页通过事件传递数据
onLoad: (option) => {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {
    data: 'data from test page',
  });
  eventChannel.emit('someEvent', {
    data: 'data from test page for someEvent',
  });
  // 监听 acceptDataFromOpenerPage 事件
  // 并获取上一页面通过 eventChannel 传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', (theData) => {
    console.log(theData);
  });
},

url 有长度限制，太长的字符串会传递失败，可改用页面通讯、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用 encodeURIComponent 对参数进行编码的示例。

VueScript

vue

<!-- navigator 组件不支持 name 方式跳转 -->
<navigator
  :url="'/pages/test/test?item=' + encodeURIComponent(JSON.stringify(item))"
></navigator>

<!-- navigator 组件不支持 name 方式跳转 -->
<navigator
  :url="'/pages/test/test?item=' + encodeURIComponent(JSON.stringify(item))"
></navigator>

// 在test.vue页面接受参数
onLoad: (thOption) => {
  const item = JSON.parse(decodeURIComponent(thOption.item));
},

// 在test.vue页面接受参数
onLoad: (thOption) => {
  const item = JSON.parse(decodeURIComponent(thOption.item));
},

注意

页面跳转路径有层级限制，不能无限制跳转新页面
跳转到 tabBar 页面只能使用 switchTab 跳转
路由 API 的目标页面必须是在 pages.json 里注册的 vue 页面。在 hello uni-app 中有个组件 ulink.vue 已对多端进行封装，可参考。
webview 中嵌入 qinjs H5 时，使用 qin.webView.navigateTo... 跳转页面

qin.redirectTo(OBJECT)

qin.replace 语法糖

关闭当前页面，跳转到应用内的某个页面。

OBJECT 参数说明

参数	类型	必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用 `=` 相连，不同参数用&分隔；如 'path?key=value&key2=value2'
name	String	是	需要跳转的应用内非 tabBar 的页面的名字，强制匹配在 pages.json 中配置 routers 参数中的 name ，如果没有配置 name 是 url 首字母大写的驼峰。 navigator 组件不支持 name 方式跳转
params	Object	否	H5 中的路径参数
query	Object	否	H5 中的问号参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

name 方式url 方式

qin.redirectTo({
  name: 'Test',
  params: {
    productId: 123,
  },
  query: {
    id: 1,
  }
});

qin.redirectTo({
  name: 'Test',
  params: {
    productId: 123,
  },
  query: {
    id: 1,
  }
});

qin.redirectTo({
  url: 'test/123?id=1',
});

qin.redirectTo({
  url: 'test/123?id=1',
});

注意：

跳转到 tabBar 页面只能使用 switchTab 跳转

qin.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

注意

如果调用了 qin.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

OBJECT 参数说明

参数	类型	必填	说明
url	String	是	需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，如果跳转的页面路径是 tabBar 页面则不能带参数
name	String	是	需要跳转的应用内非 tabBar 的页面的名字，强制匹配在 pages.json 中配置 routers 参数中的 name ，如果没有配置 name 是 url 首字母大写的驼峰。 navigator 组件不支持 name 方式跳转
params	Object	否	h5中的路径参数
query	Object	否	h5中的问号参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

name 方式url 方式

qin.redirectTo({
  name: 'Test',
  params: {
    productId: 123,
  },
  query: {
    id: 1,
  }
});

qin.redirectTo({
  name: 'Test',
  params: {
    productId: 123,
  },
  query: {
    id: 1,
  }
});

qin.redirectTo({
  url: 'test/123?id=1',
});

qin.redirectTo({
  url: 'test/123?id=1',
});

qin.getPageOpts 接收onLoad 接收

export default {
  onLoad: () => {
    // 打印出上个页面传递的参数。
    // qin.getPageOpts 可在任意地方调用
    console.log(qin.getPageOpts());
  },
  onShow: () => {
    // 打印出上个页面传递的参数。
    // qin.getPageOpts 可在任意地方调用
    console.log(qin.getPageOpts());
  },
}

export default {
  onLoad: () => {
    // 打印出上个页面传递的参数。
    // qin.getPageOpts 可在任意地方调用
    console.log(qin.getPageOpts());
  },
  onShow: () => {
    // 打印出上个页面传递的参数。
    // qin.getPageOpts 可在任意地方调用
    console.log(qin.getPageOpts());
  },
}

// 在 test.vue 页面接受参数
export default {
  // option 为 object 类型，会序列化上个页面传递的参数
  onLoad: (option) => {
    // 打印出上个页面传递的参数。
    console.log(option.id);
    // 打印出上个页面传递的参数。
    console.log(option.name);
  },
}

// 在 test.vue 页面接受参数
export default {
  // option 为 object 类型，会序列化上个页面传递的参数
  onLoad: (option) => {
    // 打印出上个页面传递的参数。
    console.log(option.id);
    // 打印出上个页面传递的参数。
    console.log(option.name);
  },
}

注意

H5 端调用 qin.reLaunch 之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时 navigateBack 不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。

qin.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意： 如果调用了 qin.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

OBJECT 参数说明

参数	类型	必填	说明
url	String	是	需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
name	String	是	需要跳转的应用内非 tabBar 的页面的名字，强制匹配在 pages.json 中配置 routers 参数中的 name ，如果没有配置 name 是 url 首字母大写的驼峰。 navigator 组件不支持 name 方式跳转
params	Object	否	h5中的路径参数
query	Object	否	h5中的问号参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

pages.jsonOther.vue 中的 Script

json

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/other/other",
        "text": "其他"
      }
    ]
  }
}

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/other/other",
        "text": "其他"
      }
    ]
  }
}

qin.switchTab({
  url: '/pages/index/index'
});

qin.switchTab({
  url: '/pages/index/index'
});

qin.back(OBJECT)

同 qin.navigateBack 的语法糖。

qin.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

OBJECT 参数说明

参数	类型	必填	默认值	说明
delta	Number	否	1	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

注意

调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

示例

// 此处是A页面
qin.navigateTo({
  url: 'B?id=1'
});

// 此处是B页面
qin.navigateTo({
  url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
qin.navigateBack({
  delta: 2
});

// 此处是A页面
qin.navigateTo({
  url: 'B?id=1'
});

// 此处是B页面
qin.navigateTo({
  url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
qin.navigateBack({
  delta: 2
});

EventChannel

页面间事件通信通道

方法

EventChannel.emit(string eventName, any args)

触发一个事件

string eventName 事件名称

any args 事件参数

EventChannel.off(string eventName, function fn)

取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

EventChannel.on(string eventName, function fn)

持续监听一个事件

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

EventChannel.once(string eventName, function fn)

监听一个事件一次，触发后失效

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

注意

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在首页 onReady 之前进行页面跳转。
H5端页面刷新之后页面栈会消失，此时 navigateBack 不能返回，如果一定要返回可以使用 history.back() 导航到浏览器的其他历史记录。

参考事项

页面路由拦截和管理，插件市场有很多封装好的工具类，搜索路由

qin.navigateTo(OBJECT) ​

qin.redirectTo(OBJECT) ​

qin.reLaunch(OBJECT) ​

qin.switchTab(OBJECT) ​

qin.back(OBJECT) ​

qin.navigateBack(OBJECT) ​

EventChannel ​

EventChannel.emit(string eventName, any args) ​

EventChannel.off(string eventName, function fn) ​

EventChannel.on(string eventName, function fn) ​

EventChannel.once(string eventName, function fn) ​

qin.navigateTo(OBJECT)

qin.redirectTo(OBJECT)

qin.reLaunch(OBJECT)

qin.switchTab(OBJECT)

qin.back(OBJECT)

qin.navigateBack(OBJECT)

EventChannel

EventChannel.emit(string eventName, any args)

EventChannel.off(string eventName, function fn)

EventChannel.on(string eventName, function fn)

EventChannel.once(string eventName, function fn)