第一步就是需要我們創(chuàng)建一個項目

第二步找到 pages/index/index.wxml 文件

<view class="container">
  <view class="header">
    <input class="input" placeholder="請輸入電影名稱" bindinput="onInput" value="{{ inputValue }}" />
    <button class="button" bindtap="searchMovie">查詢</button>
  </view>
  <view class="movie-info" wx:if="{{ movieName }}">
    <image class="poster" src="{{ moviePoster }}" mode="aspectFill" />
    <view class="info">
      <view class="title">{{ movieTitle }}</view>
      <view class="rating">評分：{{ movieRating }}</view>
      <view class="genres">類型：{{ movieGenres }}</view>
      <view class="summary">{{ movieSummary }}</view>
    </view>
  </view>
</view>

第三步在 pages/index/index.wxss 文件中添加以下樣式

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 4px;
}

.button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #007AFF;
  color: #FFF;
  border-radius: 4px;
}

.movie-info {
  display: flex;
  align-items: center;
}

.poster {
  width: 150px;
  height: 200px;
  margin-right: 20px;
}

.info {
  flex-grow: 1;
}

.title {
  font-size: 24px;
  margin-bottom: 10px;
}

.rating {
  font-size: 16px;
  margin-bottom: 10px;
}

.genres {
  font-size: 16px;
  margin-bottom: 10px;
}

.summary {
  font-size: 14px;
}

第四步在 pages/index/index.js 文件中添加下面代碼

Page({
  data: {
    inputValue: '', // 輸入框的值
    movieName: '', // 電影名稱
    moviePoster: '', // 電影海報
    movieTitle: '', // 電影標(biāo)題
    movieRating: '', // 電影評分
    movieGenres: '', // 電影類型
    movieSummary: '' // 電影簡介
  },
  onInput(e) {
    this.setData({
      inputValue: e.detail.value
    });
  },
  searchMovie() {
    const that = this;
    wx.request({
      url: 'https://api.douban.com/v2/movie/search',
      data: {
        q: this.data.inputValue,
        count: 1
      },
      success(res) {
        const movie = res.data.subjects[0];
        that.setData({
          movieName: movie.title,
          moviePoster: movie.images.large,
          movieTitle: movie.original_title,
          movieRating: movie.rating.average,
          movieGenres: movie.genres.join(' / '),
          movieSummary: movie.summary
        });
      }
    });
  }
});

功能介紹

這個示例展示了一個電影信息查詢應(yīng)用程序，包括一個輸入框和一個查詢按鈕，用于查詢指定電影的詳細(xì)信息。在下方顯示了電影的海報、標(biāo)題、評分、類型和簡介。

到這里也就結(jié)束了，希望對您有所幫助。文章來源地址http://www.zghlxwxcb.cn/news/detail-769608.html

到了這里，關(guān)于微信小程序?qū)崿F(xiàn)一個電影信息查詢的應(yīng)用程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！