实现电影详情页
主要实现的功能是：点击热映及top列表中的电影可以跳转到电影详情页面
一、主要需求：
- 基本的布局改变（多使用flex布局），图文混排
- 事件处理；网络请求
- 水平滚动scroll-view的实现
二、关键实现思路：
- 使用bindtap绑定点击事件，给电影列表中的每一条信息循环绑定一个点击事件，当点击时，将从网络获取的电影id传到处理函数中，再请求网络获取电影详情信息，返回并显示页面。
- 详情页上部分显示电影宣传海报，影片名及影片的基本信息，中间显示电影请节简介，下部分显示主演照片及姓名。对于过长的篇幅的处理是是页面可以进行上下滑动。
三、实际代码：
对热映及top电影列表页的改变：
修改index和movetop文件夹下的index.wxml文件。
index下的index.wxml：（更改布局及类型）
<!--index.wxml--><view class="box"> <!--轮播图--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="{{item}}"> <swiper-item> <image src="{{item}}" /> </swiper-item> </block> </swiper> <!--热映列表展示--> <view class="item" bindtap="showInfo" data-id="{{item.id}}" hover-class="tapClass" wx:for="{{moves}}" wx:key="{{item}}"> <image class="img" mode="aspectFit" src="{{item.images.large}}"></image> <view class="movie-info"> <view class="movie-row"> <span class="content">{{item.title}}</span> </view> <view class="movie-row"> <text class="label">主演:</text> <span class="label" wx:key="{{item.id}}" wx:for="{{item.casts}}" wx:for-item="cast"> <text class="cast-name">{{cast.name}}</text> </span> </view> <view class="movie-row"> <text class="label">导演:</text> <span class="label" wx:key="{{item.id}}" wx:for="{{item.directors}}" wx:for-item="director"> <text class="cast-name">{{director.name}}</text> </span> </view> <view class="movie-row"> <text class="label">类型:</text> <span class="label" wx:key="{{item.id}}" wx:for="{{item.genres}}" wx:for-item="item"> <text class="cast-name">{{item}}</text> </span> </view> </view> </view> </view> movetop文件夹下的index.wxml:
<view class="box"> <view class="item" bindtap="showInfo" data-id="{{item.id}}" hover-class="tapClass" wx:for="{{moves}}" wx:key="{{item}}"> <image class="img" mode="aspectFit" src="{{item.images.large}}"></image> <view class="movie-info"> <view class="movie-row"> <span class="content">{{item.title}}</span> </view> <view class="movie-row"> <span class="label">导演: </span> <span class="label" wx:key="{{item.id}}" wx:for="{{item.directors}}" wx:for-item="director"> <text class="cast-name">{{director.name}}</text> </span> </view> <view class="movie-row"> <span class="label">主演: </span> <span class="label" wx:key="{{item.id}}" wx:for="{{item.casts}}" wx:for-item="cast"> <text class="cast-name">{{cast.name}}</text> </span> </view> </view> </view></view>添加index.wxss文件内容（添加新格式）：
/* pages/moveTop/index.wxss *//**index.wxss**/swiper-item > image { width: 100%; height: 200px; padding: 0px;}.box{ display: flex; flex-direction: column; justify-content: flex-start}.item{ display: inline-flex; margin-bottom: 3rpx; background-color: white; justify-content: flex-start; padding-top: 30rpx}.movie-info{ flex:2; display: flex; flex-direction: column}.img{ flex:1; height:210rpx; width: 140rpx;}.cast{ display: inline-flex; flex-direction: row}.tapClass{ background-color: blanchedalmond}.movie-row{ display: inline-flex; flex-direction: row; flex-wrap: wrap}.label{ font-size:28rpx; color: slategrey}.content{ font-size: 36rpx}.cast-name{ font-size: 28rpx; margin-right: 16rpx}然后开发电影详情页：
在pages目录下新建一个detail目录，在detail目录中新建页面wxml文件，注意这里scroll-view水平滚动图文信息的实现。
使用bindtap绑定点击事件，给电影列表中的每一条信息循环绑定一个点击事件，当点击时，将从网络获取的电影id传到处理函数中，再请求网络获取电影详情信息，返回并显示页面。
<!--pages/detail/detail.wxml--><view class="detail-container"> <view class="img-container"> <image mode="aspectFit" src="{{detail.images.large}}"/> </view> <view class="info-container"> <view class="info-row"> <text>{{detail.title}}</text> <br/> </view> <view class="info-row"> {{detail.genres}} | {{detail.durations[0]}} </view> <view class="info-row"> {{detail.mainland_pubdate}} 在中国大陆上映 </view> </view></view><view class="movie-intr"> {{detail.summary}}</view><view class="person-container"> <view class="act-info">演员</view> <scroll-view scroll-x class="scroll-header" > <view class="act-img" wx:for="{{detail.casts}}" wx:key="{{item.id}}"> <view> <image mode="aspectFill" src="{{item.avatars.large}}"> </image> <text class="actor-name"> {{item.name}} </text> </view> </view></scroll-view></view><view> <button class="btn-like" type="primary" bindtap="addToLikes" data-id="{{detail.id}}"> </button></view>样式wxss文件：
/* pages/detail/detail.wxss */.detail-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; background-color: darkslategrey}.img-container{ flex: 1;}.img-container image{ width:320rpx; height: 220rpx}.info-container{ flex: 2; display: flex; flex-direction: column; justify-content: space-between; margin: 20rpx 0 20rpx 0}.info-row{ font-size: 24rpx; color: white}.movie-intr{ background-color: ghostwhite; font-size: 26rpx; padding: 40rpx; line-height: 40rpx}.scroll-header{display: flex;flex-direction: column;white-space: nowrap; }.scroll-header view{border:none;display: inline-block; }.scroll-header image{ width:200rpx; height: 300rpx; margin: 6rpx 6rpx 6rpx 6rpx}.act-info{ font-size: 28rpx; margin-left: 10rpx}.act-img{ display: flex; flex-direction: column; justify-content: left; margin-left: 5rpx}.actor-name{ font-size: 28rpx; display: flex; flex-direction: column; justify-content: center; margin-left: 5rpx}.btn-like{ margin: 30rpx 40rpx 20rpx 40rpx}detail.js文件：接收其他页面传递过来的参数，加载影片信息并显示。
/** * 页面的初始数据 */Page({data: { }, /** * 生命周期函数--监听页面加载 */onLoad: function (options) { //接收其他页面传递过来的参数 let movieId = options.id, that = this; wx.showLoading({ title: '加载影片信息中...', }) wx.request({ url: "http://api.douban.com/v2/movie/subject/" + movieId, data: { apikey: '0b2bdeda43b5688921839c8ecb20399b' }, //url: "https://douban.uieee.com/v2/movie/subject/" + movieId, header: { "Content-Type": "json" }, success: function (res) { that.setData({ detail: res.data }); wx.hideLoading() } }) }})此时，程序的运行效果如下：
