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


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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
jquery实现submit提交表单
Feb 03 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
微信小程序位置授权处理方法
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中的integer类型使用分析
2010/07/27 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
python3图片转换二进制存入mysql
2013/12/06 Python
详解Python传入参数的几种方法
2019/05/16 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
利用python汇总统计多张Excel
2020/09/22 Python
python pip如何手动安装二进制包
2020/09/30 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
小学三年级学生评语
2014/04/22 职场文书
孔庙导游词
2015/02/04 职场文书
2015年环保局工作总结
2015/05/22 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
服装店员工管理制度
2015/08/07 职场文书
Python基础之pandas数据合并
2021/04/27 Python