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

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

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

第二步找到 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: '', // 电影标题
    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
        });
      }
    });
  }
});

功能介绍

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

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

相关文章
|
3天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的学生公寓电费信息的详细设计和实现
24 1
|
10天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
15天前
|
存储 小程序 开发者
如何提升微信小程序的应用速度
如何提升微信小程序的应用速度
|
29天前
|
关系型数据库 Serverless 分布式数据库
Serverless 应用引擎常见问题之在抖音快手小程序上使用如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
22 3
|
1月前
|
存储 缓存 监控
微信团队分享:微信后端海量数据查询从1000ms降到100ms的技术实践
针对大数据量带来的查询性能问题,微信团队对数据层查询接口进行了针对性的优化,将平均查询速度从1000ms+优化到了100ms级别。本文为各位分享优化过程,希望对你有用!
32 2
|
1月前
|
监控 安全 API
怎么用Python找回微信撤回信息
怎么用Python找回微信撤回信息
33 0
|
1月前
|
存储 移动开发 小程序
利用微搭搭建信息查询小程序
利用微搭搭建信息查询小程序
|
2月前
|
人工智能 小程序 算法
探索AI动画与小程序的应用创新-产品面对面系列直播第四期
探索AI动画与小程序的应用创新-产品面对面系列直播第四期
66 0
|
2月前
|
前端开发 小程序 JavaScript
小程序页面导航全家桶:navigateTo、redirectTo、switchTab等方法一网打尽,快速掌握不同场景下的最佳应用!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
2月前
|
小程序 开发者 容器
探索多端与小程序的应用创新——产品面对面系列直播第二期
探索多端与小程序的应用创新——产品面对面系列直播第二期
118 0

热门文章

最新文章