pageA => pageB(pageA跳转pageB)
1、数据缓存
在pageA中缓存数据,跳转到pageB后获取缓存数据进行后续逻辑处理。
// pageA.js设置缓存
wx.setStorage({
key:"key",
data:"value"
})
// wx.setStorage的同步版本
try {
wx.setStorageSync('key', 'value')
} catch (e) { }
// pageB.js读取缓存
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
// wx.getStorage 的同步版本
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
2、query路由传参
1、使用<navigator>标签实现
<!-- pageA.wxml -->
<view class="btn-area">
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>
<!-- pageB.wxml -->
<view> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>
// pageB.js
Page({
data: {
title: ''
},
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
2、使用路由API实现
// pageA.js
// redirectTo
wx.redirectTo({
url: 'pageB?title=1'
})
// navigateTo
wx.navigateTo({
url: 'pageB?title=1'
})
// pageB.js
Page({
onLoad: function(option){
console.log(option.query) // { title: 1 }
}
})
3、app全局变量:globalData
//app.js
App({
onLaunch: function() {
// 定义的全局变量,如token,某些状态等,放在globalData下
this.globalData = {
title: '',
hasTitleChange: false
}
}
})
// pageA.js
// 设置globalData中的变量
getApp().globalData.title = 1
// pageB.js
// 获取globalData中的变量
console.log(getApp().globalData.title) // 1
4、EventChannel
使用事件通信通道(EventChannel)实现
// pageA.js
wx.navigateTo({
url: 'pageB',
success: (res) => {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('dataFromOpenerPageA', { title: 1 })
}
})
// pageB.js
Page({
onLoad: function(option){
const eventChannel = this.getOpenerEventChannel()
// 监听dataFromOpenerPageA事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('dataFromOpenerPageA', (data) => {
console.log(data) // { title: 1 }
})
}
})
pageB => pageA(pageB返回pageA)
1、数据缓存
2、PageObject的getCurrentPages()
// pageB.js
let pages = getCurrentPages()
// 获取pageObject数组中的pageA
let prevPage = pages[pages.length - 2]
// 设置pageA页面的变量
prevPage.setData({
hasChangeTitle: true
})
// 返回到pageA
wx.navigateBack({
delta: 1
})
3、app全局变量:globalData
4、EventChannel
// pageA.js
wx.navigateTo({
url: 'pageB',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPageB: (data) => {
console.log(data) // { hasChangeTitle: true }
// 获取到pageB中传过来的数据并且赋值
this.setData(data)
},
someEvent: (data) => {
console.log(data) // { data: 'test }
}
...
}
})
// pageB.js
Page({
onLoad: function(option){
const eventChannel = this.getOpenerEventChannel()
// 将数据传送到pageA中
eventChannel.emit('acceptDataFromOpenedPage', { hasChangeTitle: true });
eventChannel.emit('someEvent', { data: 'test' });
}
})
结语:
个人在开发小程序时用到的,做一下整理,可能不全面,还希望大家能留言指正,感谢。