三种方式获取小程序页面跳转并传参

  方法一、可以将数据保存在app.js文件中,因为app.js的数据是全局可见的,但是如果所有全局变量都放到app.js中,会导致该文件很臃肿

  方法二、通过官方文档可知在页面onLoad生命周期的参数中获取打开当前页面路径中的参数。那么可以通过 wx.navigateTo()传递参数,跳转到官方文档

  数据可以传递一个或多个,也可传递数组和json对象

  注意:因为url的长度有限,对象太长,结果发现拼接在URL之后不完整,导致之后解析不出来,所以路由传参对象时要注意,传参的对象不能太长。

  eg:

      a.js        // 页面跳转,URL地址是将要跳转的页面相对当前页面的路径
        wx.navigateTo({
            url: ‘../../help/help?data=‘ + {num:‘33‘},
        })    

     help页面
        onLoad: function (options) {
            // 打印页面传递来的参数
            console.log(‘options‘,options)
            // 打印页面传递来的参数类型
            console.log(typeof(options.data))
        },

  方法三、使用getCurrentPages()获取到页面栈数据,从中找到当前页面传递的参数,跳转到官方文档

  eg: 

     a.js     // 页面跳转,URL地址是将要跳转的页面相对当前页面的路径
        wx.navigateTo({
            url: ‘../../help/help?data={num:"33"}‘ ,
        })
             help页面
        onLoad: function () {
            let pages = getCurrentPages();//页面栈数组
            let optionsData = pages[pages.length - 1].options//当前页面路由传递的参数
            console.log(pages,optionsData)
        },

  

原文地址:https://www.cnblogs.com/weichen913/p/9782155.html

时间: 2024-08-28 23:27:15

三种方式获取小程序页面跳转并传参的相关文章

微信小程序页面跳转方法总结

微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111' }) // 关闭当前页面,返回上一页面或多级页面.可通过 getCurrentPages() 获取当

Scala学习2 ———— 三种方式完成HelloWorld程序

三种方式完成HelloWorld程序 分别采用在REPL,命令行(scala脚本)和Eclipse下运行hello world. 一.Scala REPL. 按照第一篇在windows下安装好scala后,直接Ctrl+R,然后在运行命令窗里输入scala,或者输入cmd后,进入命令行在输入scala. 然后我们输入 print("Hello World!") 看下结果: 第一种方式运行完毕. 注意:前两行命令使用了Tab键,可以像bash一样有补全的功能哦! 二.Scala脚本完成H

微信小程序页面跳转

wx.navigateTo(OBJECT) 不销毁当前页面,仅将其隐藏,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 销毁当前页面,跳转到应用内的其他页面. 微信小程序页面不跳转: 我们有时候会发现,其他的地方都好好的能跳转,可是为啥突然就无效那呢? 原因: 检查你要跳转的位置是否在app.js中注册过. 检查你要跳转的地址是否有误.经常都是因为少写或者多写使得跳转无效. 检查你要跳转的位置是否位于TabBar中,如果是的话,要使用wx.swi

微信小程序页面跳转、逻辑层模块化

一.页面的跳转 微信小程序的页面跳转函数方法有两个,另外还有两种模块跳转方式. 函数跳转: 1.wx.navigateTo(OBJECT): wx.navigateTo({ url: 'test?id=1' })//保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. //问号后面的参数为传递至指定页面onload方法内的参数.id为自定义参数名,在跳转页面获取参数值时,也是通过这个设置的参数来获取的. 2.wx.redirectTo(OBJECT): wx

小程序页面跳转

跳转有五种方式: 1.navigateTo :不能打开tabbar的页面,跳转的时候只是隐藏跳转页面: onHide(打开新页面) 2.redirectTo:不能打开tabbar的页面,跳转的时候销毁跳转页面,并且最多只能跳转五层 onUnload (重定向) 3.navigateBack:页面有层级时的左上角返回键,或者wx.navigateBack 返回上一层级,销毁当前页面 onunload (页面返回) 4.switchTab:只能打开tabbar页面,跳转页面是隐藏 onHide(ta

小程序--页面跳转

wxml页面 <view catchtap='onTapJump' class='journey-container'> <text class='journey'>开启小程序之旅</text> </view> wxss页面 .journey-container{ margin-top: 200rpx; border: 1px solid #ea5a3c; width: 200rpx; height: 80rpx; border-radius:5px; te

(uniapp和)微信小程序页面跳转首页报错:navigateTo:fail can not navigateTo a tabbar page

如果在这种情况下无法实现跳转并出现can not navigate to tabBar page错误, 很有可能是由于在底部tabbar里面定义乐同样连接地址的bar,如果在底部footer页面定义了相同地址的bar,则此页面无法跳转, 解决方法: 使用uniapp或微信小程序的 uni.switchTab({         url: '路径'}); wx.switchTab({         url: '路径'}); 原文地址:https://www.cnblogs.com/fanqiuz

微信小程序 页面跳转传递数据

点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量  data-album-obj 页面跳转

微信小程序返回上一页传参并刷新

问题 微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了. 需求 现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面. 方法 一.使用到的方法是小程序的页面栈,感兴趣可以打印一下pages的内容,就是你页面跳转的轨迹数组,最后一项就是当前页面,倒数第二个就是上一页.很好理解,因为在当前页停止了,肯定是最后一个 //获取页面栈 let page