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

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

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

第二步找到 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});}});}
});