Bindtap传参的问题解决了,那么跳页的时候,也需要传递参数,毕竟,从文章列表页,跳到文章详情页,是需要文章id的。
小程序这部分到是提供了不少的方法,大概整理了一下。
微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转。
为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式。
1.wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
javascript
复制代码
wx.navigateTo({ url: 'test?id=1' })
url即目标页面,保证是非tabbar的页面的路径。路径后可以带参数,参数和路径之间用?=连接,不同参数用&分开,如'path?key=value&key2=value2'。需要获取页面A的参数,代入页面B中进行操作。在生命周期函数中获取option.id并转成实体,进行操作和赋值。
javascript
复制代码
Page({ onLoad: function(option){ console.log(option.id) } })
2.wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
javascript
复制代码
wx.redirectTo({ url: 'test?id=1' })
3.wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。页面的跳转存储逻辑实际是一个栈队列,先入后出的形式,即逐层进入,如果返回会进入的页面先返回,因此wx.navigateBack()中转递的参数默认值为1,即退后一个页面,可以修改数值,进行多层的返回。
javascript
复制代码
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码 // 此处是A页面 wx.navigateTo({ url: 'B?id=1' }) // 此处是B页面 wx.navigateTo({ url: 'C?id=1' }) // 在C页面内 navigateBack,将返回A页面 wx.navigateBack({ delta: 2 })
4.wx.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径只允许写在app.json中tabbar配置的页面。
javascript
复制代码
wx.switchTab({ url: '/index' })
tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面
5.wx.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面。
javascript
复制代码
wx.reLaunch({ url: 'test?id=1' })
6. 使用组件
在元素里面使用属性url就可以
Index.wxml
html
复制代码
<navigator url=”../test/test?id=458”> 点击跳转</navigator>
------------------------我是分割线-------------------------------
上面大概是页面跳转的六种方式,简单的传参其实在路由里写就可以了,但是要是传递数组,或者对象之类的,直接在路由里编写可能就是不行了。
我们需要处理一下:
使用JSON.stringify参数转换成string
javascript
复制代码
//这里我们跳转详情界面 queryItemClick: function (e) { var that = this //拿到点击的index下标 var index = e.currentTarget.dataset.index //将对象转为string var queryBean = JSON.stringify(that.data.queryList[index]) wx.navigateTo({ url: '../queryResult/queryResult?queryBean=' + queryBean, }) } 接受的时候,在用JSON.parse将数据转换回来。 /***重点内容* * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that=this var queryBean = JSON.parse(options.queryBean); that.setData({ queryBean: queryBean }) //console.log(that.data.queryBean) }
有好的建议去,请在下方输入你的评论。
欢迎访问个人博客:guanchao.site
欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”