简单写一个微信小程序的电影app

小程序的电影app

编写代码

app.json
定义小程序的全局配置，包括页面路径、窗口表现等。

{
  "pages": [
    "pages/index/index",
    "pages/movie/movie"
  ],
  "window": {
    "navigationBarTitleText": "电影App",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000000",
    "backgroundColor": "#ffffff"
  }
}

pages/index/index.wxml
首页展示电影列表。

<view class="container">
  <block wx:for="{{movies}}" wx:key="id">
    <navigator url="/pages/movie/movie?id={{item.id}}">
      <view class="movie-item">
        <image class="poster" src="{{item.poster}}"></image>
        <view class="title">{{item.title}}</view>
      </view>
    </navigator>
  </block>
</view>

pages/index/index.js
首页逻辑，展示电影数据。

Page({
  data: {
    movies: []
  },
  onLoad() {
    // 模拟请求电影列表数据
    this.setData({
      movies: [
        { id: 1, title: '电影1', poster: '/images/movie1.jpg' },
        { id: 2, title: '电影2', poster: '/images/movie2.jpg' }
        // 更多电影数据...
      ]
    });
  }
});

pages/movie/movie.wxml
电影详情页。

<view class="container">
  <image class="poster" src="{{movie.poster}}"></image>
  <view class="title">{{movie.title}}</view>
  <view class="description">{{movie.description}}</view>
</view>

pages/movie/movie.js
电影详情逻辑

Page({
  data: {
    movie: {}
  },
  onLoad(options) {
    const movieId = options.id;
    // 模拟请求电影详情数据
    this.setData({
      movie: {
        id: movieId,
        title: `电影${movieId}`,
        poster: `/images/movie${movieId}.jpg`,
        description: `这是电影${movieId}的详细描述。`
      }
    });
  }
});

样式文件

你可以根据需要编写样式文件来美化你的页面。

例如 pages/index/index.wxss:

.container {
  padding: 16px;
}
.movie-item {
  display: flex;
  margin-bottom: 16px;
}
.poster {
  width: 100px;
  height: 150px;
  margin-right: 16px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}

实现电影票购买功能。
通过上述步骤，你将能够创建一个简单但功能完善的微信小程序电影应用。希望这对你有所帮助！