使用微信小程序开发制作一个简单的电影资讯应用

要开发一个简单的电影资讯应用程序，我们将使用微信小程序开发框架来实现。本教程将逐步指导你完成整个过程，包括创建小程序、设计页面、获取电影数据、展示电影列表、实现搜索功能和显示电影详情。

准备工作

在开始之前，你需要准备以下工作：

1. 安装微信开发者工具：请根据你的操作系统下载和安装微信开发者工具。

2. 注册小程序开发者账号：如果你还没有小程序开发者账号，请先进行注册。

3. 获取电影数据源：我们将使用豆瓣电影API来获取电影数据。你需要到豆瓣开发者中心注册并获取API Key。

现在我们可以开始创建小程序并设计页面了。

创建小程序

1. 打开微信开发者工具，并使用小程序开发者账号登录。

2. 点击工具栏上的“新建项目”按钮，填写项目名称、项目目录和 AppID（可以使用测试号的 AppID）等信息，并选择“小程序”作为项目类型。点击确认按钮创建项目。

3. 项目创建完成后，在微信开发者工具的左侧栏中找到并打开创建的项目。

现在我们可以开始设计小程序的页面。

设计页面

我们将创建两个页面：电影列表页和电影详情页。

电影列表页

1. 在微信开发者工具中，找到项目目录中的pages目录，右键点击该目录并选择“新建页面”。

2. 填写页面名称为movieList，并勾选“自动创建文件”和“创建框架随页面创建”。

3. 创建完成后，在movieList目录下找到新建的movieList.js、movieList.json和movieList.wxml文件。

4. 打开movieList.json文件，添加以下配置：

{
  "navigationBarTitleText": "电影资讯"
}

1. 打开movieList.wxml文件，添加以下代码：

<view class="container">
  <view class="header">
    <text class="title">电影资讯</text>
    <input class="input" placeholder="搜索电影" bindinput="onSearchInput" />
  </view>
  <view class="list">
    <block wx:for="{{movies}}" wx:key="{{index}}">
      <view class="item" bindtap="onMovieTap" data-id="{{item.id}}">
        <image class="cover" src="{{item.cover}}" mode="aspectFill" />
        <text class="name">{{item.name}}</text>
        <text class="rating">评分：{{item.rating}}</text>
      </view>
    </block>
  </view>
</view>

1. 打开movieList.wxss文件，添加以下样式：

.container {
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 24px;
}

.input {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 15px;
}

.list {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: calc(50% - 10px);
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
}

.cover {
  width: 100%;
  height: 200px;
  border-radius: 4px;
}

.name {
  font-size: 16px;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

现在我们已经完成了电影列表页的设计。我们将在后面的步骤中给这个页面添加功能。

电影详情页

1. 在微信开发者工具中，找到项目目录中的pages目录，右键点击该目录并选择“新建页面”。

2. 填写页面名称为movieDetail，并勾选“自动创建文件”和“创建框架随页面创建”。

3. 创建完成后，在movieDetail目录下找到新建的movieDetail.js、movieDetail.json和movieDetail.wxml文件。

4. 打开movieDetail.json文件，添加以下配置：

{
  "navigationBarTitleText": "电影详情"
}

1. 打开movieDetail.wxml文件，添加以下代码：

<view class="container">
  <image class="cover" src="{{movie.cover}}" mode="aspectFill" />
  <view class="info">
    <text class="name">{{movie.name}}</text>
    <text class="rating">评分：{{movie.rating}}</text>
    <text class="director">导演：{{movie.director}}</text>
    <text class="actors">主演：{{movie.actors}}</text>
    <text class="plot">剧情简介：{{movie.plot}}</text>
  </view>
</view>

1. 打开movieDetail.wxss文件，添加以下样式：

.container {
  padding: 10px;
}

.cover {
  width: 100%;
  height: 300px;
  border-radius: 4px;
}

.info {
  margin-top: 10px;
}

.name {
  font-size: 24px;
}

.rating {
  font-size: 16px;
  margin-top: 5px;
}

.director,
.actors {
  font-size: 16px;
  margin-top: 5px;
  color: #666;
}

.plot {
  font-size: 16px;
  margin-top: 5px;
  white-space: pre-line;
}

现在我们已经完成了电影详情页的设计。接下来我们将获取电影数据并在电影列表页中展示。

获取电影数据

我们将使用豆瓣电影API来获取电影数据。

1. 在微信开发者工具中，打开app.json文件，并添加以下配置：

{
  "pages": [
    "pages/movieList/movieList",
    "pages/movieDetail/movieDetail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

1. 在movieList.js文件中，添加以下代码：

const app = getApp()

Page({
  data: {
    movies: []
  },
  onLoad() {
    this.getMovies()
  },
  getMovies() {
    wx.request({
      url: 'https://api.douban.com/v2/movie/top250',
      data: {
        apikey: app.globalData.apiKey
      },
      success: (res) => {
        console.log(res.data)
        this.setData({
          movies: res.data.subjects.map((item) => ({
            id: item.id,
            name: item.title,
            cover: item.images.large,
            rating: item.rating.average
          }))
        })
      }
    })
  },
  onMovieTap(e) {
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `/pages/movieDetail/movieDetail?id=${id}`
    })
  },
  onSearchInput(e) {
    const keyword = e.detail.value
    wx.request({
      url: 'https://api.douban.com/v2/movie/search',
      data: {
        q: keyword,
        apikey: app.globalData.apiKey
      },
      success: (res) => {
        console.log(res.data)
        this.setData({
          movies: res.data.subjects.map((item) => ({
            id: item.id,
            name: item.title,
            cover: item.images.large,
            rating: item.rating.average
          }))
        })
      }
    })
  }
})

1. 在movieDetail.js文件中，添加以下代码：

const app = getApp()

Page({
  data: {
    movie: {}
  },
  onLoad(options) {
    const id = options.id
    this.getMovie(id)
  },
  getMovie(id) {
    wx.request({
      url: `https://api.douban.com/v2/movie/subject/${id}`,
      data: {
        apikey: app.globalData.apiKey
      },
      success: (res) => {
        console.log(res.data)
        this.setData({
          movie: {