微信小程序页面跳转及传值
发布时间:2020-09-08
浏览量: 896
文章分类: 小程序
背景:小程序首页展示了n个文章的列表,通过v-for循环后,每个标题都有自己独立的key,我这里叫先统一叫做sid,我的预期是点击这个文章的标题,就打开小程序对应的文章页面,这样就可以直接看到具体文章的内容。
上面这个背景也就涉及了小程序的页面之间的传值了,也就是主页是一个模板、文章页面是一个模板,这样在主页点击了不同的文章,就可以通过这个文章的sid告诉文章页面,然后文章页面根据这个sid去请求对应的文章内容,在展示出来即可。
小程序的点击事件
触发事件bindtap
// data-sid 就是给这个区域绑定了一个参数sid
...
...
js函数获取对应的点击事件和获取参数
函数中有一个微信给我们自带的事件参数event,这个参数里面的东西还挺多的,包括点击的时间、位置等等,基本等同于js的event,然后通过event.target.dataset.sid获取到参数,在通过wx.navigateTo方法让小程序实现页面之间的传值。
gotoArticleInfo: function (event) {
// 获取文章唯一id
const articleId = event.target.dataset.sid
console.log(articleId) // 这个就是上面绑定的sid文章id了
wx.navigateTo({
url: '/pages/article/article-info?sid=' + sid,//这里是你自己写的文章内容页面
})
},
文章内容页面获取发送的参数
现在文章展示的页面已经完成了点击和文章sid的发送,然后就是要在article-info.js里面去获取发送来的文章sid,然后在去请求文章内容就大功告成了。
因为微信小程序有好几个生命周期函数,我选择了在页面加载的时候获取sid。
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var sid = options.sid; //用户请求的具体文章
var that = this;
wx.request({....}) //发送请求,然后在渲染页面即可。
通过上面的方法就可以解决页面跳转获取不同文章内容的问题啦~