如何免费搭建影院小程序

<!-- index.wxml -->
<view class="container">
  <view class="movie-list">
    <view class="movie-item" wx:for="{{movies}}" wx:key="id">
      <image src="{{item.poster}}" class="movie-poster"></image>
      <view class="movie-info">
        <text class="movie-title">{{item.title}}</text>
        <text class="movie-description">{{item.description}}</text>
        <button bindtap="buyTicket" data-id="{{item.id}}">购票</button>
      </view>
    </view>
  </view>
</view>

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.movie-list {
  width: 100%;
}

.movie-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.movie-poster {
  width: 150rpx;
  height: 225rpx;
  margin-right: 20rpx;
}

.movie-title {
  font-size: 32rpx;
  font-weight: bold;
}

.movie-description {
  font-size: 24rpx;
  color: #666;
}

// index.js
Page({
  data: {
    movies: [
      {
        id: 1,
        title: '电影A',
        description: '这是一部非常精彩的电影',
        poster: 'https://example.com/posterA.jpg'
      },
      {
        id: 2,
        title: '电影B',
        description: '这是一部非常感人的电影',
        poster: 'https://example.com/posterB.jpg'
      }
    ]
  },
  buyTicket: function(e) {
    const movieId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/buyTicket/buyTicket?id=' + movieId
    });
  }
});