本文详细介绍了微信小程序中六种常见的页面间参数传递方法，包括url传值、本地存储、全局Data、组件传值、通信通道(eventChannel)以及页面栈的使用，讨论了各自的优缺点和适用场景。
目录
目录
第七种：小程序页面间通信——EventChannel（数据量多时）
前言
- 由于经常需要进行页面间传参且各种传参的业务场景也不相同，根据官方文档和日常工作进行了总结，共有七种传参方式。
概览：
| 方式 | 优点 | 缺点 |
| globalData | 双向传参、全应用可用 | 不及时 |
| storage | 双向传参、全应用可用 | 不及时 |
| 路由 | 简单方便、及时 | 正向传参 |
| 通信通道 | 双向传参、及时 | 仅 wx.navagateTo() 接口调用才可用 |
| 页面栈 | 可操作数据和函数、及时 | 反向传参、仅 wx.navagateTo() 和<navigator open-type="navigateTo" url="/bbb?id=1"></navigator〉才可用 |
第一种：url传值
-
A页面部分js代码
Page({
toDetailPage: function (e) {
var name = "斗帝蓝电霸王龙Pro";
wx.navigateTo({
url: '/pages/detail/detail?name =' + name,
}
})-
B页面部分js代码
Page({
/**
* onLoad生命周期函数--监听页面加载
*/
onLoad: function (option) {
console.log(option); // 斗帝蓝电霸王龙Pro
/**
* 这种普通函数中this的指向是动态的，为了保证函数内部可以访问到组件实例
* 这里将this赋值给that
* 如果你想直接使用this，可以使用箭头函数，箭头函数没有自己的this
* 他会继承外层作用域的this
* 在箭头函数中this的指向是定义的上下文,而不是执行时的上下文(`不清楚的可以看001例子说明`)
*/
let that = this
that.setData({
name：option
})
},
}) // 001
// 举个例子来说明：
const obj = {
name: '斗帝蓝电霸王龙Pro',
sayHello: function() {
console.log(`Hello, ${this.name}!`);
},
sayHelloArrow: () => {
console.log(`Hello, ${this.name}!`);
}
};
obj.sayHello(); // 输出：Hello, 斗帝蓝电霸王龙Pro!
obj.sayHelloArrow(); // 输出：Hello, undefined!
// 下面我来分析一下这段代码
/**
* sayHelloArrow是一个箭头函数。当我们调用obj.sayHello()时，
* this指向的是调用该方法的对象obj，所以输出的结果是Hello, 斗帝蓝电霸王龙Pro!。
* 而当我们调用obj.sayHelloArrow()时，由于箭头函数的this是在定义时确定的,
* 而定义sayHelloArrow时的上下文是全局上下文，
* 所以this.name实际上是指向全局对象（在浏览器中是window对象）的name属性，而全局对象
* 没有name属性，所以输出的结果是Hello, undefined!。`
*/url传值使用详细说明
-
说明：url上直接携带参数长度是有限的且不支持特殊符号，可用编码、解码的方式解决， 在传参之前进行编码encodeURIComponent()， 接收的时候进行解码decodeURIComponent()。
api跳转
-
A页面部分js代码
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
url:'/pages/detail/detail?id=5213828',
})
//关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
url: '/pages/detail/detail?id=5213828',
})
//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
url: '/pages/detail/detail?id=5213828',
})
//保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
wx.navigateTo({
url: '/pages/detail/detail?id='+ encodeURIComponent(this.data.id),
})
//以上四种路由方式在传参和接参上没有任何区别-
B页面部分js代码
Page({
//地址传参带过来的参数只能在该方法的options参数中获取
onLoad:function(options){
console.log(decodeURIComponent(options.id)) // '5213828' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串
}
})组件跳转
-
A页面部分wxml
<view>
<navigator open-type="switchTab" url="/pages/detail/detail?id=5213828">
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
</navigator>
<navigator open-type="reLaunch" url="/pages/detail/detail?id=5213828">
关闭所有页面，打开到应用内的某个页面
</navigator>
<navigator open-type="redirectTo" url="/pages/detail/detail?id=5213828">
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
</navigator>
<navigator open-type="navigateTo" url="/pages/detail/detail?id=5213828">
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
</navigator>
</view>
//以上四种路由方式在传参和接参上没有任何区别-
B页面部分js代码
Page({
//地址传参带过来的参数只能在该方法的options参数中获取
onLoad:function(options){
console.log(options.id) //'5213828' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串
}
})第二种：将值缓存在本地，再从本地取值
-
A页面部分js代码
Page({
toDetailPage: function (e) {
var name = "斗帝蓝电霸王龙Pro";
wx.setStorageSync("name", name);
wx.navigateTo({
url: '/pages/detail/detail'
})
}
})-
B页面部分js代码
Page({
/**
* onLoad生命周期函数--监听页面加载
*/
onLoad: function (option) {
var name = wx.getStorageSync("name");
console.log(name); // 斗帝蓝电霸王龙Pro
}
})第三种：全局传值(应用实例传值)
-
app.js页面代码
App({
globalData: {
name: '斗帝蓝电霸王龙'
}，
// onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）
onLaunch() {
// 读取 token
this.getToken()
},
getToken() {
// 读取本地的token
// this 指向应用实例本身
this.token = wx.getStorageSync('token')
this.refreshToken = wx.getStorageSync('refreshToken')
},
setToken(key, token) {
// 存储到应例实例当中
this[key] = token
// 存储到本地存储当中
wx.setStorageSync(key, token)
}
})-
其他页面js代码
// 获取应用实例
const app = getApp();
Page({
onLoad: function (option) {
console.log(app.globalData.name); // 斗帝蓝电霸王龙
// 重新存储新的 token
app.setToken('token', '斗帝蓝电霸王龙Pro')
app.setToken('refreshToken', '斗帝蓝电霸王龙Pro')
},
getToken() {
console.log(app.token); // 斗帝蓝电霸王龙Pro
console.log(app.refreshToken); // 斗帝蓝电霸王龙Pro
}
})第四种：组件传值
-
父传子
-
父组件
// 父组件的wxml <classDetail detail="{{name}}"></classDetail> // 父组件的js data:{ name:"父组件---斗帝蓝电霸王龙Pro" } // 父组件的json（要把子组件注册进去） "usingComponents": { "classDetail": "./components/classDetail/index" } -
子组件
// 子组件的js properties:{ detail: String } // 子组件的wxml <view>{{detail}}<view> // 父组件---斗帝蓝电霸王龙Pro子传父
-
-
子传父
-
子组件
// 子组件.wxml <button bindtap="changeSelect">添加</button> // 子组件的js changeSelect(){ // 在子组件当中通过this.triggerEvent("自定义事件名"，要传递的数据) this.triggerEvent("updataSelect", '子组件---斗帝蓝电霸王龙Pro') } -
父组件
// 父组件的wxml // 在父组件的子标签中声明自定义事件 bind:自定义事件名="事件名" // 注意，这里的changeSelect是父组件js里的方法名称，updataSelect是子组件js里传递的方法名称 <shudanbook index="{{ index }}" bind:updataSelect="changeSelect" ></shudanbook> // 父组件的js changeSelect(e){ //获得传递过来的值 console.log(e.detail) // 子组件---斗帝蓝电霸王龙Pro }
-
第五种：使用通信通道（通信通道是wx.navitageTo()独有的）
-
A页面部分js代码
wx.navigateTo({
url: "/pages/detail/detail?name='斗帝蓝电霸王龙Pro'",
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) { //参数名字随便起，前后页面对应上即可
//对发送回来的数据进行处理
console.log(data) // 斗帝蓝电霸王龙Plus
},
someEvent: function(data) { // 参数名字随便起，前后页面对应上即可
console.log(data) // 斗帝蓝电霸王龙Pro max
}
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: '斗帝蓝电霸王龙Pro' })//参数名字随便起，前后页面对应上即可
}
})-
B页面部分js代码
Page({
onLoad: function(option){
//获取通信通道
const eventChannel = this.getOpenerEventChannel()
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
//对发送过来的数据进行处理
console.log(data) // 斗帝蓝电霸王龙Pro
})
//向上一页面发送数据
eventChannel.emit('acceptDataFromOpenedPage', {data: '斗帝蓝电霸王龙Plus'});
eventChannel.emit('someEvent', {data: '斗帝蓝电霸王龙Pro max'});
}
})第六种：使用页面栈（只对当前页面栈中存在的页面生效）
-
A页面部分js代码
Page({
data:{
name:'斗帝蓝电霸王龙Pro',
age:22
},
eatFood:function(food){
console.log('eating '+ food)
}
})-
B页面部分js代码
Page({
onLoad: function (options) {
// 获取当前页面栈
const pages = getCurrentPages();
// 获取上一页面对象
let prePage = pages[pages.length - 2];
console.log(prePage.data.name) // 斗帝蓝电霸王龙Pro
prePage.eatFood('斗帝蓝电霸王龙Pro') // eating 斗帝蓝电霸王龙Pro
}
})第七种：小程序页面间通信——EventChannel（数据量多时）
场景：页面 A 跳转 B，需要带一些参数过去，体积小的参数可以通过query带过去，数据量较多时，query不是一个好的选择。这时候应采用小程序的 EventChannel
一、理论前提
如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：
- 被打开的页面可以通过
this.getOpenerEventChannel()方法来获得一个EventChannel对象； - wx.navigateTo 的
success回调中也包含一个 EventChannel 对象。 - 这两个 EventChannel 对象间可以使用
emit和on方法相互发送、监听事件。
二、简单使用：单向传值
A页面：
<button bindtap="navigateToB">跳转B页面</button>
navigateToB () {
wx.navigateTo({
url: '/pages/logs/logs',
success: (res) => {
// 跳转成功后，触发事件'delivery', 并可携带数据（即第一个参数是事件名，第二个参数是数据包）
res.eventChannel.emit('delivery', {
data: '123'
})
}
})
}B页面：
onLoad() {
// 建立数据通道
const eventChannel = this.getOpenerEventChannel()
// 监听'delivery'事件，并获取数据包
eventChannel.on('delivery', data => {
console.log('on - delivery', data) // 123
})
}三、双向通信
跳转到B页面后，如果你还需要 回传一些数据给到A页面：
- 在B页面中仍然以
emit触发事件，并发送数据包；多个事件平铺 - A页面
wx.navigateTo中的events参数：是页面间通信接口，用于监听被打开页面发送到当前页面的数据
A页面：
navigateToB () {
wx.navigateTo({
url: '/pages/logs/logs',
// events 用于监听下一个页面的事件 及 回传的数据包
events: {
reverseData: (data) => {
console.log('reverseData', data)
},
backData: (data) => {
console.log('backData', data)
}
},
success: (res) => {
// 跳转成功后，触发事件'delivery', 并可携带数据（即第一个参数是事件名，第二个参数是数据包）
res.eventChannel.emit('delivery', {
data: '123'
})
}
})
}B页面：
onLoad() {
// 建立数据通道
const eventChannel = this.getOpenerEventChannel()
// 监听'delivery'事件，并获取数据包
eventChannel.on('delivery', data => {
console.log('on - delivery', data)
})
// 通过emit向上一个页面回传数据，多个事件平铺
eventChannel.emit('reverseData', {
data: '321'
})
eventChannel.emit('backData', {
data: 'abc'
})
}总结
- globalData与storage原理相同都是将数据放在一个公共的地方全应用随意取用，但是他们的数据不推送也不关联，即globalData和storage中的数据更新了，但已经获取过值的页面其对应的值并 不会更新。
- 解决办法：将各页面获取值的事件放到onShow()中，每次页面进入前台的时候都会重新从globalData和storage中取值。
- 路由携带参数简单方便，但是地址长度有限不能携带大量参数和特殊符号。
- 解决办法：在传参之前进行编码encodeURIComponent()，接收的时候进行解码 decodeURIComponent()。如此大量参数可以携带但是只能单方面传递参数，即只能a向b传，反之则不行。
- 通信通道，页面可以互相传参，但是该通道仅存在于wx.navagateTo()的接口调用时才有效。
- 页面栈，这是一个极其强大功能，它本质上不是向页面传参而是直接修改页面参数和方法。通过页面栈我们可以拿到该页面的对象，然后就可以对该页面的各项数据和函数进行操作。但是这种方法只能在b页面去操作a页面，并不能在a页面操作b页面，因为此时页面栈中还没有b。并且该方法也仅限于通过wx.navagateTo()或 <navigator open-type="navigateTo" url="/pages/detail/detail?id=5213828">跳转</navigator> 这两种方式进入b页面才可使用，因为其他方式跳转到b页面时已经销毁了其他所有页面，页面栈中已经没有上一个页面了。
- 小程序页面间通信——EventChannel（数据量多时）就可以愉快地传大的数据包了。（
wx.navigateTo）
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
