⼩程序页⾯间跳转传参⽅式总结
前⾔
在做⼩程序的时候，经常会遇到需要页⾯间传递参数的情况，根据⽬前项⽬经验，总结了以下⼏种⽅式：URL传参、缓存和⽅法调⽤。
URL传参
这种⽅式是最简单也是最常⽤的，这⾥就不做过多介绍了。
缓存
虽然URL传参⽐较简单易⽤，但也有局限性，就是只能传递简单参数，对于复杂的参数就显得⽆能为⼒了，但很多时候我们需要传递的是结构⽐较复杂的数据，这时候很多开发者都会想到⽤缓存。
使⽤缓存我们有两种⽅式：⼩程序⾃带Storage和vuex。因为我们的项⽬是基于mpvue的，顺带也⽤了vuex了
Storage：通过⼩程序提供的API可以⽅便的进⾏缓存操作，如：wx.setStorage、wx.getStorage等。
Vuex：这就跟我们平时在做vue项⽬时⼀样了，在store中声明⼀个变量存放传递的参数。写文章的小程序
不管是⽤上⾯哪种⽅式，想法都是⼀样的：在跳转页⾯之前先把参数保存到缓存，进⼊页⾯之后先获取缓存的参数，然后清除缓存中的参数，进⾏业务操作。⼤致伪代码如下：
// pageA.vue
goToPageB() {
let arg = {
name: 'Jack',
age: 9
}
// 先把参数保存到缓存⽐如这⾥⽤的是⼩程序的Storage，这⾥采⽤同步的⽅式
wx.setStorageSync({
key: 'pageArg',
data: arg
})
wx.navigateTo({
url: 'pageB'
})
}
// pageB.vue
mounted() {
// 从缓存中取出参数
let arg = wx.getStorageSync('pageArg')
// 清除缓存中的页⾯参数
// 进⾏业务处理
// ...
}
⼤致就是这么个逻辑，可能具体项⽬中会对存取缓存进⾏封装，或者在vuex中的做法⼜不⼀样，但思想是⼀样的。
这样做是可以实现功能，但总感觉不太好，每次都要进⾏存取操作，感觉很⿇烦，⽽且显得不⾼端。。。
于是乎，我们想了个⽅式传递，就是今天的主⾓：⽅法调⽤。
⽅法调⽤
这种⽅式肯定不是最好最优雅的解决⽅式，因为我们也觉得有⽋缺的地⽅，但⽬前⽤起来还是⽐较⽅便的，今天放出来也是希望让⼤家看下怎么进⾏修改，也以便于我们优化。
主要是⽤了⼩程序提供的 getCurrentPages ⽅法，具体内容可，我这⾥直接就贴图了，因为⽂档说的很简单
⼩程序对页⾯的管理感觉跟浏览器中的history差不多，也是有⼀个页⾯栈，每次跳转页⾯都是往这个栈⾥push⼀个页⾯对象，返回的时候就pop⼀个，当然具体实现要复杂很多。
这⾥官⽅重点提⽰了：不要尝试修改页⾯栈，这也就是为什么我说我们的这种传参⽅式不是很好的原因，我们就是通过⽅法修改了这个页⾯栈的数据。
带参数返回上⼀页
具体实现⽅式
// 往前获取页⾯对象，类似(-n)
function getPageByPreCount(n) {
let currentPages = getCurrentPages()
return currentPages[Math.max(0, currentPages.length - (n + 1))]
}
/* 返回上⼀页并带回参数
* parameter functionName 上⼀个页⾯中⽤来接收带回参数的⽅法名称，注意：⽅法要在data中
* parameter args 带回去的参数
*/
function returnPrevPage(functionName, ...args) {
if (functionName) {
let prevPage = getPageByPreCount(1)
wx.navigateBack()
// ⽅法⾥⼿动调⽤了页⾯的⽅法，并把页⾯参数在这⾥作为⽅法参数传递
prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] == 'function'
&& prevPage.data.$root[0][functionName](...args)
} else {
wx.navigateBack()
}
}
项⽬中使⽤，如在搜索页(search.vue)⾯中有⼀个过滤条件是⽤户，但可以选择多个⽤户，⽽且选择⽤户是在另外⼀个页⾯(user-pick.vue)⾥进⾏的，这就是要从user-picker.vue跳回search.vue，并带回选中的⽤户列表信息
// user-pick.vue
methods: {
onSelectConfirm(users) {
returnPrevPaeg('onSelectUser', users)
}
}
// user-pick.vue
data() {
return {
// 把具体处理还是放到了methods中，如果处理逻辑⽐较简单也可以直接放这⾥
onSelectUser: UserOk
}
},
methods: {
onUserOk(users) {
/
/ 拿到⽤户信息进⾏搜索操作
// this.search(user)
}
}
带参数跳转页⾯
返回上⼀页还是⽐较好理解的，因为页⾯已经在页⾯栈⾥存在了，可以取到并调⽤⽅法，但对于跳转的就不太好实现了，因为每次跳转页⾯都是往页⾯栈⾥追加⼀个新的对象，在跳转前⽆法获取到该对象。
这⾥就是我说的做的不太好的地⽅，因为我们采⽤的是setTimeout⽅式。。。
// 前进页⾯回调⽅法
function navigateTo (url,functionName,...args) {
triggerNextPageFn('onHide', functionName, ...args)
// 跳转后处理数据
wx.navigateTo({url})
}
function redirectTo (url,functionName,...args) {
triggerNextPageFn('onUnload', functionName, ...args)
// 跳转后处理数据
}
// 通⽤触发后⼀个页⾯的⽅法
function triggerNextPageFn(type, functionName, ...args) {
let prePage = getCurPage()
if (functionName) {
// 保存当前变量
((..._args) => {
let oldEventFn = prePage[type]
prePage[type] = () => {
// 前进页⾯改变onReady⽅法，这⾥使⽤了setTimeout
setTimeout(() => {
let newPage = getCurPage()
let oldOnReady = Ready
newPage.data.$root[0] && typeof newPage.data.$root[0][functionName] == 'function'
&& newPage.data.$root[0][functionName](..._args)
oldOnReady.apply(newPage)
}
})
prePage[type] = oldEventFn
}
})(...args)
}
}
⼩结
传递⽅式那么多，选择适合⾃⼰的才是最重要的。虽然我们写的这个传参⽅法不是官⽅⽀持的，因为⽂档⾥⾯明确说了不要修改页⾯栈，但就⽬前使⽤情况来看还是没遇到什么问题的，也许还没遇到吧。
就本篇⽂章中介绍的传参⽅式，如果有不妥的地⽅或者更好的修改建议，希望⼤家能帮我们提出来，⼤家共同进步。
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。