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

背景：小程序首页展示了n个文章的列表，通过v-for循环后，每个标题都有自己独立的key，我这里叫先统一叫做sid，我的预期是点击这个文章的标题，就打开小程序对应的文章页面，这样就可以直接看到具体文章的内容。

上面这个背景也就涉及了小程序的页面之间的传值了，也就是主页是一个模板、文章页面是一个模板，这样在主页点击了不同的文章，就可以通过这个文章的sid告诉文章页面，然后文章页面根据这个sid去请求对应的文章内容，在展示出来即可。

小程序的点击事件

触发事件bindtap

// data-sid 就是给这个区域绑定了一个参数sid
<view bindtap="onClick" class="..." data-sid="1">
    ...
</view>
<view bindtap="onClick" class="..." data-sid="2">
    ...
</view>

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

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