微信小程序之——商品详情页_小程序商品详情页面

一、效果图

二、代码

movie.wxml：

movie.js:

注：这里的url就是你跳转的详情页面 + 当前dom元素的id

tiaozhuan:function(e){
  var id = e.currentTarget.id
  console.log(id)
  wx.navigateTo({
    url: '../detail/detail?id='+id,
  })
}


1
2
3
4
5
6
7
8
9

detail.wxml

正常渲染页面内容就可以了
1

detail.js

onLoad: function(options){
    var page = this
    console.log("这是options"+options)
    var id = options.id //把moview.js中url链接传过来的id赋值出来后，再传到我们的详情页接口后面
    wx.request({
      url: 'https://m.maoyan.com/ajax/detailmovie?movieId='+id,
      method: 'GET',
      
      success:function(res){
          console.log(res)
          console.log("详情页面请求成功！")
        page.setData({
            detail:res.data
        })
        wx.setNavigationBarTitle({
          title: res.data.detailMovie.nm,
        })
      },
      fail:function(res){

      }

    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

最后注：
如果其他页面也有商品想跳到详情页，那就给dom元素一个id=“{{item.id}}” bindtap=“tiaozhuanDetail” ，JS代码用之前写过那个就行了