WeChat アプレットは映画情報クエリ アプリケーションを実装します

最初のステップはプロジェクトを作成することです

2 番目のステップは、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>

3 番目のステップでは、次のスタイルを 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;
}

ステップ4: 次のコードをpages/index/index.jsファイルに追加します。

Page({
    
    
  data: {
    
    
    inputValue: '', // 输入框的值
    movieName: '', // 电影名称
    moviePoster: '', // 电影海报
    movieTitle: '', // 电影标题
    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
        });
      }
    });
  }
});

特徴

この例は、指定された映画の詳細情報を照会するための入力ボックスと照会ボタンを含む映画情報照会アプリケーションを示しています。以下に映画のポスター、タイトル、評価、ジャンル、あらすじを示します。

これで終わりです。お役に立てば幸いです。