微信小程序页面间跳转传参方式总结

前言

在做微信小程序的时候，经常会遇到需要页面间传递参数的情况，根据目前项目经验，总结了以下几种方式：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')
 // 清除缓存中的页面参数
 wx.removestoragesync('pagearg')
 // 进行业务处理
 // ...
}

大致就是这么个逻辑，可能具体项目中会对存取缓存进行封装，或者在vuex中的做法又不一样，但思想是一样的。

这样做是可以实现功能，但总感觉不太好，每次都要进行存取操作，感觉很麻烦，而且显得不高端。。。

于是乎，我们想了个方式传递，就是今天的主角：方法调用。

方法调用

这种方式肯定不是最好最优雅的解决方式，因为我们也觉得有欠缺的地方，但目前用起来还是比较方便的，今天放出来也是希望让大家看下怎么进行修改，也以便于我们优化。

主要是用了小程序提供的 getcurrentpages 方法，具体内容可查看文档，我这里直接就贴图了，因为文档说的很简单

小程序对页面的管理感觉跟浏览器中的history差不多，也是有一个页面栈，每次跳转页面都是往这个栈里push一个页面对象，返回的时候就pop一个，当然具体实现要复杂很多。

这里官方重点提示了：不要尝试修改页面栈，这也就是为什么我说我们的这种传参方式不是很好的原因，我们就是 通过方法修改了这个页面栈的数据 。

带参数返回上一页

具体实现方式

// 往前获取页面对象，类似history.go(-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: this.onuserok
 }
},
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)
 // 跳转后处理数据
 wx.redirectto({url})
}

// 通用触发后一个页面的方法
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 = newpage.onready
   newpage.onready = function () {
   newpage.data.$root[0] && typeof newpage.data.$root[0][functionname] == 'function' 
   && newpage.data.$root[0][functionname](..._args)
   oldonready.apply(newpage)
   newpage.onready = oldonready
   }
  })
  prepage[type] = oldeventfn
  }
 })(...args)
 }
}

小结

传递方式那么多，选择适合自己的才是最重要的。虽然我们写的这个传参方法不是微信官方支持的，因为文档里面明确说了不要修改页面栈，但就目前使用情况来看还是没遇到什么问题的，也许还没遇到吧。

就本篇文章中介绍的传参方式，如果有不妥的地方或者更好的修改建议，希望大家能帮我们提出来，大家共同进步。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。