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


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 相关文章推荐
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
jQuery动画与特效详解
Feb 01 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
php实现微信发红包功能
2018/07/13 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python with的用法
2014/08/22 Python
python中正则表达式的使用详解
2014/10/17 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python gdal安装与简单使用
2019/08/01 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
python中的测试框架
2020/11/13 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
冰淇淋店创业计划书范文
2013/12/27 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
低碳环保演讲稿
2014/08/28 职场文书
房产分割协议书范文
2014/11/21 职场文书
运动会观后感
2015/06/09 职场文书
《叶问2》观后感
2015/06/15 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers