目录
目录
第七种:小程序页面间通信——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
)