小程序点击调转带参数_微信小程序页面间跳转传参方式总结

前言

在做微信小程序的时候&＃xff0c;经常会遇到需要页面间传递参数的情况&＃xff0c;根据目前项目经验&＃xff0c;总结了以下几种方式&＃xff1a;URL传参、缓存和方法调用。

URL传参

这种方式是最简单也是最常用的&＃xff0c;这里就不做过多介绍了。

缓存

虽然URL传参比较简单易用&＃xff0c;但也有局限性&＃xff0c;就是只能传递简单参数&＃xff0c;对于复杂的参数就显得无能为力了&＃xff0c;但很多时候我们需要传递的是结构比较复杂的数据&＃xff0c;这时候很多开发者都会想到用缓存。

使用缓存我们有两种方式&＃xff1a;小程序自带Storage和vuex。因为我们的项目是基于mpvue的&＃xff0c;顺带也用了vuex了

Storage&＃xff1a;通过小程序提供的API可以方便的进行缓存操作&＃xff0c;如&＃xff1a;wx.setStorage、wx.getStorage等。

Vuex&＃xff1a;这就跟我们平时在做vue项目时一样了&＃xff0c;在store中声明一个变量存放传递的参数。

不管是用上面哪种方式&＃xff0c;想法都是一样的&＃xff1a;在跳转页面之前先把参数保存到缓存&＃xff0c;进入页面之后先获取缓存的参数&＃xff0c;然后清除缓存中的参数&＃xff0c;进行业务操作。大致伪代码如下&＃xff1a;

// pageA.vue

goToPageB() {

let arg &＃61; {

name: &＃39;Jack&＃39;,

age: 9

}

// 先把参数保存到缓存 比如这里用的是小程序的Storage&＃xff0c;这里采用同步的方式

wx.setStorageSync({

key: &＃39;pageArg&＃39;,

data: arg

})

wx.navigateTo({

url: &＃39;pageB&＃39;

})

}

// pageB.vue

mounted() {

// 从缓存中取出参数

let arg &＃61; wx.getStorageSync(&＃39;pageArg&＃39;)

// 清除缓存中的页面参数

wx.removeStorageSync(&＃39;pageArg&＃39;)

// 进行业务处理

// ...

}

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

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

于是乎&＃xff0c;我们想了个方式传递&＃xff0c;就是今天的主角&＃xff1a;方法调用。

方法调用

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

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

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

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

带参数返回上一页

具体实现方式

// 往前获取页面对象&＃xff0c;类似history.go(-n)

function getPageByPreCount(n) {

let currentPages &＃61; getCurrentPages()

return currentPages[Math.max(0, currentPages.length - (n &＃43; 1))]

}

/* 返回上一页并带回参数

* parameter functionName 上一个页面中用来接收带回参数的方法名称&＃xff0c;注意&＃xff1a;方法要在data中

* parameter args 带回去的参数

*/

function returnPrevPage(functionName, ...args) {

if (functionName) {

let prevPage &＃61; getPageByPreCount(1)

wx.navigateBack()

// 方法里手动调用了页面的方法&＃xff0c;并把页面参数在这里作为方法参数传递

prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] &＃61;&＃61; &＃39;function&＃39;

&& prevPage.data.$root[0][functionName](...args)

} else {

wx.navigateBack()

}

}

项目中使用&＃xff0c;如在搜索页(search.vue)面中有一个过滤条件是用户&＃xff0c;但可以选择多个用户&＃xff0c;而且选择用户是在另外一个页面(user-pick.vue)里进行的&＃xff0c;这就是要从user-picker.vue跳回search.vue&＃xff0c;并带回选中的用户列表信息

// user-pick.vue

methods: {

onSelectConfirm(users) {

returnPrevPaeg(&＃39;onSelectUser&＃39;, users)

}

}

// user-pick.vue

data() {

return {

// 把具体处理还是放到了methods中&＃xff0c;如果处理逻辑比较简单也可以直接放这里

onSelectUser: this.onUserOk

}

},

methods: {

onUserOk(users) {

// 拿到用户信息 进行搜索操作

// this.search(user)

}

}

带参数跳转页面

返回上一页还是比较好理解的&＃xff0c;因为页面已经在页面栈里存在了&＃xff0c;可以取到并调用方法&＃xff0c;但对于跳转的就不太好实现了&＃xff0c;因为每次跳转页面都是往页面栈里追加一个新的对象&＃xff0c;在跳转前无法获取到该对象。

这里就是我说的做的不太好的地方&＃xff0c;因为我们采用的是setTimeout方式。。。

// 前进页面回调方法

function navigateTo (url,functionName,...args) {

triggerNextPageFn(&＃39;onHide&＃39;, functionName, ...args)

// 跳转后处理数据

wx.navigateTo({url})

}

function redirectTo (url,functionName,...args) {

triggerNextPageFn(&＃39;onUnload&＃39;, functionName, ...args)

// 跳转后处理数据

wx.redirectTo({url})

}

// 通用触发后一个页面的方法

function triggerNextPageFn(type, functionName, ...args) {

let prePage &＃61; getCurPage()

if (functionName) {

// 保存当前变量

((..._args) &＃61;> {

let oldEventFn &＃61; prePage[type]

prePage[type] &＃61; () &＃61;> {

// 前进页面改变onReady方法&＃xff0c;这里使用了setTimeout

setTimeout(() &＃61;> {

let newPage &＃61; getCurPage()

let oldOnReady &＃61; newPage.onReady

newPage.onReady &＃61; function () {

newPage.data.$root[0] && typeof newPage.data.$root[0][functionName] &＃61;&＃61; &＃39;function&＃39;

&& newPage.data.$root[0][functionName](..._args)

oldOnReady.apply(newPage)

newPage.onReady &＃61; oldOnReady

}

})

prePage[type] &＃61; oldEventFn

}

})(...args)

}

}

小结

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

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

总结

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