微信小程序电影详情功能实现

实现电影详情页

主要实现的功能是：点击热映及top列表中的电影可以跳转到电影详情页面

一、 主要需求：

1. 基本的布局改变（多使用flex布局），图文混排
2. 事件处理；网络请求
3. 水平滚动scroll-view的实现

二、关键实现思路：

1. 使用bindtap绑定点击事件，给电影列表中的每一条信息循环绑定一个点击事件，当点击时，将从网络获取的电影id传到处理函数中，再请求网络获取电影详情信息，返回并显示页面。
2. 详情页上部分显示电影宣传海报，影片名及影片的基本信息，中间显示电影请节简介，下部分显示主演照片及姓名。对于过长的篇幅的处理是是页面可以进行上下滑动。

三、实际代码：

对热映及top电影列表页的改变：
修改index和movetop文件夹下的index.wxml文件。
index下的index.wxml：（更改布局及类型）

  
  
    
      
        
      
    
  

  
  
   
 
      
 
      
      
        {{item.title}}
      
       
 
        
          主演:
          
             {{cast.name}}
          
        
 
        
          导演:
          
             {{director.name}}
        

        
 
          
        类型:
          
             {{item}}
             
        
        
 
      
    
  
 

movetop文件夹下的index.wxml:

  
    
    
      
        {{item.title}}
      
      
        导演:  
        
             {{director.name}}
        
      
       
        主演:  
        
             {{cast.name}}
        
      
    
  

添加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传到处理函数中，再请求网络获取电影详情信息，返回并显示页面。

  
     
  
  
      
          {{detail.title}}
          

      
      
          {{detail.genres}} | {{detail.durations[0]}}
      
      
          {{detail.mainland_pubdate}} 在中国大陆上映
      
    


    {{detail.summary}}


  演员
  
      
      
          
          
            
              {{item.name}}
          
      
      



    
    

样式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()
    }
  })
  
}
})

此时，程序的运行效果如下：