微信小程序根据列表跳转电影详情

今天搞明白根据获取列表信息的不同ID显示出电影详情

因为自己第一次做小程序，都是一点一点摸索的

我的程序就是一个电影购票系统，数据从数据库拿取，有后端

首页是hot,详情界面是detail

以下是首页界面，点击不同电影，进入详情界面

hot.wxml

添加事件 bindtap="toDetail"，和要传给后的数据 data-filmid='{{item.id}}' ，filmid这个是自己定义的名字，item.id中的id是自己数据库中要有的属性

<view class="mov_item" wx:for="{{hotfilms}}" wx:key="id" bindtap="toDetail" data-filmid='{{item.id}}'>

          <image src="{{item.img}}"></image>

          <view class="content">

            <view class="name">

              {{item.name}}

              <van-tag color="#DCDCDC">{{item.version}}</van-tag>

            </view>

            <view class="score" wx:if="{{item.score}}">评分:

              <text>{{item.score}}</text>

            </view>

            <view class="actors" wx:if="{{item.actor}}"> 主演:

              <text >{{item.actor}} </text>

            </view>

            <view class="time">{{item.country}}|{{item.dur}}分钟|  {{item.cat}}</view>

          </view>

          <view class="buy">

            <van-button color="#ef4136" plain size="small">购票</van-button>

          </view>

        </view>

hot.js

wx.navigateTo这个是说明跳转界面的；e.currentTarget.dataset这个是获取动作数据的

toDetail:function(e){
  var idx =e.currentTarget.dataset.filmid;   
  console.log(idx);    //在控制台中打印出来检验
  wx.navigateTo({
    url: '/pages/detail/detail?id='+idx,
  })
},

详情界面detail.js

因为我有其他函数，所以写在onLoad外边

url: 'http://localhost:8080/nowmovie/detail?id='+filmid,URL之所以这么写是因为我有后端

//获取电影详情
ToDetail:function(e){
  var filmid = e.id;
    console.log(filmid);
    wx.request({
      url: 'http://localhost:8080/nowmovie/detail?id='+filmid,
      method:"GET",
      success:(result) => {
        console.log(result.data.message)
        this.setData({
          Detail:result.data.message
      })
      },
    })
},
onLoad: function (options) {
  this.getHotmovieList(), //获取热映资源
  this.getComingSoonmovieList(),//获取待映资源
  // options.id 就是首页传过来的id，接下来循环找到id所匹配的数据就可以进行渲染啦！
  this.ToDetail(options)
}

后端获取代码，controller

@RestController
@RequestMapping("/nowmovie")

public class NowmovieController {
    @Autowired
    private INowmovieService nowmovieService; //这是服务层的接口，用于处理与热映数据相关的业务逻辑。

    //查询热映数据
    @GetMapping("/findnowmovie")

    public R findnowmoive() {
        List<Nowmovie> nowMoiveList = nowmovieService.list(new QueryWrapper<Nowmovie>().orderByDesc("time"));
        Map<String, Object> map = new HashMap<>();
        map.put("message", nowMoiveList);
        return R.ok(map);

    }
    //根据ID查询电影细节
    @GetMapping("detail")
    public R detail(Integer id){ //通过指定ID返回相应的电影信息
        Nowmovie nowmovie = nowmovieService.getById(id);
        Map<String, Object> map = new HashMap<>();
        map.put("message", nowmovie);
        return R.ok(map);
    }
}

这次调试成功全靠 cutefery这个博主，我是根据他的代码才调试成功，这个博主讲的更详细

小程序云开发库详情页跳转（云数据库中调取数据）_每个页面直接如何跳转云开发-CSDN博客