微信小程序实现一个电影信息查询的应用程序

微信小程序实现一个电影信息查询的应用程序

    • 第一步就是需要我们创建一个项目
    • [第二步找到 pages/index/index.wxml 文件](#第二步找到 pages/index/index.wxml 文件)
    • [第三步在 pages/index/index.wxss 文件中添加以下样式](#第三步在 pages/index/index.wxss 文件中添加以下样式)
    • [第四步在 pages/index/index.js 文件中添加下面代码](#第四步在 pages/index/index.js 文件中添加下面代码)
    • 功能介绍

第一步就是需要我们创建一个项目

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

javascript 复制代码
<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 文件中添加以下样式

javascript 复制代码
.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 文件中添加下面代码

javascript 复制代码
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
        });
      }
    });
  }
});

功能介绍

这个示例展示了一个电影信息查询应用程序,包括一个输入框和一个查询按钮,用于查询指定电影的详细信息。在下方显示了电影的海报、标题、评分、类型和简介。

到这里也就结束了,希望对您有所帮助。

相关推荐
说私域8 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
一渊之隔3 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun7 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54587 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui