帮忙写一个微信小程序页面可以从后端url中查询到课程表中多门课程及它们的属性有subjectcourse_idcredit每一个课程都用框在一起并且这个课程框可以点击会变黑并跳转到其他页面jswtmlcss三部分代码

WXML代码：

<view class="container">
  <view wx:for="{{courses}}" wx:key="course_id" class="course-box" bindtap="gotoCourse">
    <view class="course {{selected === item.course_id ? 'selected' : ''}}">
      <text class="subject">{{item.subject}}</text>
      <text class="course-id">{{item.course_id}}</text>
      <text class="credit">{{item.credit}} credits</text>
    </view>
  </view>
</view>

WXSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 20rpx;
}

.course-box {
  margin: 20rpx;
}

.course {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  height: 200rpx;
  border: 2rpx solid #666;
  border-radius: 10rpx;
  background-color: #fff;
}

.selected {
  background-color: #333;
  color: #fff;
}

.subject {
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

.course-id {
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.credit {
  font-size: 20rpx;
}

JS代码：

Page({
  data: {
    courses: [],
    selected: ''
  },

  onLoad: function(options) {
    // 从后端url中获取课程表数据
    wx.request({
      url: 'https://example.com/courses',
      success: (res) => {
        this.setData({
          courses: res.data
        })
      }
    })
  },

  gotoCourse: function(e) {
    let course_id = e.currentTarget.dataset.course_id
    this.setData({
      selected: course_id
    })
    wx.navigateTo({
      url: '/pages/course-details/course-details?course_id=' + course_id
    })
  }
})
``