小程序学习笔记-页面跳转传值请求数据（5）

小程序学习之页面跳转传值请求数据

1.小程序页面跳转传值
先定义data-aid的值

<button size="mini" data-aid="1" bindtap="goDetails">跳转到详情页面1</button>
<button size="mini" data-aid="2" bindtap="goDetails">跳转到详情页面2</button>

获取到定义的data-aid，拼接到跳转链接里面

goDetails(e){
        //console.log(e.currentTarget.dataset.aid)
        var aid = e.currentTarget.dataset.aid
        wx.navigateTo({
            url: '../foodContent/foodContent?aid='+aid
           
        })
    },

在foodContent页面接收food页面传过来的aid

/**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options)
    }

2.请求数据

循环列表

页面效果：

图片不显示是因为 \ 这个符号小程序识别不了

解决方法 用正则把\ 替换为/

注意这里图片的路径


页面渲染效果如下：

3.页面跳转传值获取详情
主要分三步：
1）在food页面定义菜品的id；

2）在详情页面获取对应的id


3）通过id请求详情数据


页面渲染数据：

效果：