微信小程序往服务器传值,微信小程序页面跳转及传值

微信小程序页面跳转及传值

发布时间: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({....}) //发送请求，然后在渲染页面即可。

通过上面的方法就可以解决页面跳转获取不同文章内容的问题啦~