内容简介:在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。这种方式是最简单也是最常用的,这里就不做过多介绍了。虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存。
在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式: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) } } 复制代码
小结
传递方式那么多,选择适合自己的才是最重要的。虽然我们写的这个传参方法不是微信官方支持的,因为文档里面明确说了不要修改页面栈,但就目前使用情况来看还是没遇到什么问题的,也许还没遇到吧。
就本篇文章中介绍的传参方式,如果有不妥的地方或者更好的修改建议,希望大家能帮我们提出来,大家共同进步。
以上所述就是小编给大家介绍的《微信小程序中页面间跳转传参方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Flutter 三种方式实现页面切换后保持原页面状态
- 一种新的页面加载时间检测方式
- JS每日一题:小程序跳转页面有几种方式? 有什么不同?
- vue页面跳转后返回原页面初始位置方法
- 点击a链接打开第三方页面变成下载页面问题
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Essential C++中文版
李普曼 (Stanley B.Lippman) / 侯捷 / 电子工业出版社 / 2013-8-1 / CNY 65.00
本书以四个面向来表现C++的本质:procedural(面向过程的)、generic(泛型的)、object-based(基于对象的)、objectoriented(面向对象的)。全书围绕一系列逐渐繁复的程序问题,以及用以解决这些问题的语言特性来组织。循此方式,你将不只学到C++的功能和结构,也可学到它们的设计目的和基本原理。 本书适合那些已经开始从事软件设计,又抽不出太多时间学习新技术的程......一起来看看 《Essential C++中文版》 这本书的介绍吧!