在开发小程序的时候，会碰到页面间进行跳转的需求，小程序间页面跳转的方法有很多，大体分为两类，一个是指令方式，一个是用过js控制。
一、js控制跳转
1、wx.navigateTo
wx.navigateTo用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。
// 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，但是 redirectTo
wx.navigateTo({
url: 'page/home/home?user_id=111'
})2、wx.navigateBack
wx.navigateBack用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面
// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
wx.navigateTo({
url: 'page/home/home?user_id=111' // 页面 A
})
wx.navigateTo({
url: 'page/detail/detail?product_id=222' // 页面 B
})
// 跳转到页面 A
wx.navigateBack({
delta: 2
})3、wx.redirectTo
wx.redirectTo当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时，我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。
// 关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
url: 'page/home/home?user_id=111'
})4、wx.switchTab
tabBar页面专用，对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。
// 跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。
wx.switchTab({
url: 'page/index/index'
})5、wx.reLaunch
wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。
// 关闭所有页面，打开到应用内的某个页面。
wx.reLanch({
url: 'page/home/home?user_id=111'
})二、指令式跳转
// navigator 组件默认的 open-type 为 navigate
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面，打开到应用内的某个页面</navigator>
// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面，返回上一级页面或多级页面</navigator>navigator的open-type属性 可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能：
open-type="navigate"等价于API的 wx.navigateTo
而wx.navigateTo的url是需要跳转的应用内非 tabBar 的页面的路径
open-type="redirect"等价于API的 wx.redirectTo 而wx.redirectTo的url是需要跳转的应用内非 tabBar 的页面的路径 open-type="switchTab"等价于API的
wx.switchTab而wx.switchTab的url是需要跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
三、页面通信
1、使用url 路径传递
1.1、传递普通字符串
通过在url后面拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’。
// A页面跳转代码
goB(){
wx.navigateTo({
url: '/pages/B/index?id=value',
})
},
// B页面接收代码
onLoad: function (options) {
console.log('id', options.id)
}1.2、传递对象
上面的案例是字符串参数，但是很多情况下需要传递对象。这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递，再到接收页面通过JSON.parse解析使用。
// A页面跳转代码
goB(){
let userStr = JSON.stringify(this.data.userInfo)
wx.navigateTo({
url: '/pages/B/index?id='+userStr,
})
}
// B页面接收代码
onLoad: function (options) {
console.log('id', JSON.parse(options.id))
}2、使用globalData 全局变量
globalData是小程序app.js中固定的一个属性，存储的数据可在全项目任意处使用
// app.js
App({
globalData:{},
})
// aaa.js
const app = getApp();
app.globalData.name='xiaowang';
// bbb.js
const app = getApp();
console.log(app.globalData.name) //xiaowang
3、使用storage 数据缓存
storage是微信分给每个小程序的缓存，单个参数最大1M，数据总和最大10M
// aaa.js
Page({
data:{
name:'xiaowang'
},
})
//只支持原生类型、Date、及能够通过JSON.stringify序列化的对象
wx.setStorageSync('name',this.data.name)
// bbb.js
console.log(wx.getStorageSync(name)) //xiaowang
4、事件通信
通过事件通信通道
// A页面跳转代码
goB() {
wx.navigateTo({
url: '/pages/B/index',
success:(res)=>{
// 发送一个事件
res.eventChannel.emit('toB',{ userInfo: this.data.userInfo })
}
})
}
// B页面接收代码
onLoad: function (options) {
// 获取所有打开的EventChannel事件
const eventChannel = this.getOpenerEventChannel();
// 监听 index页面定义的 toB 事件
eventChannel.on('toB', (res) => {
console.log(res.userInfo)
})
}在A-B-C多个页面直接建立数据通道
//注意this.getOpenerEventChannel() 只能在navigateTo模板页面使用，其他更多页面使用时，
//可以保存在getApp()全局实例中以备其他页面使用
// 保留AB通道事件，已备C页面给A页面发送数据
// B页面
const eventChannel = this.getOpenerEventChannel()
getApp().pageBEventChannel = eventChannel
//C页面
getApp().pageBEventChannel.emit('PageAacceptDataFromPageC', { data: 'Page C->A' });5、使用第三方iny bus 事件
github官网：GitHub - landluck/iny-bus: Event bus、事件通信、支持 各大平台小程序（微信小程序、支付宝小程序 等等）
5.1、安装
方式一. 通过 npm 安装
# npm
npm i iny-bus -save
# yarn
yarn add iny-bus --production方式二. 下载代码
直接通过 git 下载 iny-bus 源代码，并将dist目录 中的 index.js 拷贝到自己的项目中
git clone https://github.com/landluck/iny-bus.git5.2、使用
使用内置方法文章来源：https://www.toymoban.com/news/detail-686096.html
// App、Page、Component 使用方法一致
import bus from 'iny-bus'
// bus.app bus.page bus.component
const page = bus.page({
busEvents: {
// 简单使用
postMessage(msg) {
this.setData({
msg
})
},
// 一次性事件
postMessageOnce: {
handler (msg) {
this.setData({
msg
})
},
once: true
}
},
onLoad() {
bus.emit('postMessage', 'hello bus')
bus.emit('postMessageOnce', 'hello bus once')
}
})
Page(page)在生命周期中使用文章来源地址https://www.toymoban.com/news/detail-686096.html
// 小程序
import bus from 'iny-bus'
// 添加事件监听
// 在 onLoad 中注册, 避免在 onShow 中使用
onLoad () {
this.eventId = bus.on('事件名', (a, b, c, d) => {
// 支持多参数
console.log(a, b, c, d)
this.setData({
a,
b,
c
}
})
}
// 移除事件监听，该函数有两个参数，第二个事件id不传，会移除整个事件监听，传入ID，会移除该页面的事件监听，避免多余资源浪费, 在添加事件监听后，页面卸载(onUnload)时建议移除
onUnload () {
bus.remove('事件名', this.eventId)
}
// 派发事件，触发事件监听处更新视图
// 支持多参传递
onClick () {
bus.emit('事件名', a, b, c)
}
// 清空所有事件监听
onClear () {
bus.clear()
}到了这里，关于小程序页面跳转和通信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
