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


Posted in Javascript onJune 13, 2019

前言

在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式: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)
 }
}

小结

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

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

总结

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

Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
javascript 学习之旅 (2)
Feb 05 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
微信小程序位置授权处理方法
Jun 13 #Javascript
json数据格式常见操作示例
Jun 13 #Javascript
微信小程序实现渐入渐出动画效果
Jun 13 #Javascript
微信小程序前端自定义分享的实现方法
Jun 13 #Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 #Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 #Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
python实现udp数据报传输的方法
2014/09/26 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python 实现多线程下载视频的代码
2019/11/15 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
平面设计师岗位职责
2014/09/18 职场文书
庆六一开幕词
2015/01/29 职场文书
校长个人总结
2015/03/03 职场文书