微信小程序之豆瓣电影

1.首先是推荐电影页面

可以看出这里用了scroll-view组件来实现滚动效果

我们需要通过一个API来获取这些信息，你需要在微信小程序公众号平台把需要访问的API地址配置好

https://douban.uieee.com/v2/movie/top250

index.js

var API_URL = 'https://douban.uieee.com/v2/movie/top250'

Page({
  data:{
    movies:[],
    title: "加载中..."
  },

  onLoad:function(){
    var that = this;
    wx.showToast({
      title:"加载中...",
      icon:"loading",
      duration:10000
    });
    
    
    //在加载时，徐娅发出请求来获取资源，url就是你需要获取资源的地址
    wx.request({
      url: API_URL,
      data:{},
      header:{
        'Content-Type': 'json' 
      },
      success:function(res) {
        wx.hideToast();
        var data = res.data;
        that.setData({
            title:data.title,
            movies:data.subjects
        });  
        console.log(data);          
      }
    });  
  }
})

index.wxml

<view class="page-header">
     <text class="page-header-text">{{title}}</text>
</view>


<scroll-view class="page-body" scroll-y="true">
   <navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
       <view class="item">
          <image class="poster" src="{{item.images.small}}"></image>
          <view class="meta">
             <text class="title">{{item.title}}</text>
             <text class="sub-title">{{item.original_title}}({{item.year}})</text>
             <text class="artists">
                <text wx:for="{{item.directors}}">
                   {{item.name}}
                </text>
             </text>
          </view>
          <text class="rating">
              <text>{{item.rating.average}}</text>
          </text>
       </view>
   </navigator>
</scroll-view>

这里index.wxml文件的样式我写在app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

page{
  font-family: "Microsoft YaHei";
  background-color:#fff;
  display:flex;
  flex-direction: column;
}
.page-header{
   display:flex;
   justify-content:center;
   border-bottom:2px solid #ccc;
   margin-bottom:10rpx; 
}
.page-header-text{
  padding:20rpx 40rpx;
  color:#999;
  font-size:30px;
}

.page-body{
  display:flex;
  flex:1;
  flex-direction:column;
}

.item{
  display:flex;
  padding:20rpx 40rpx;
  border-bottom:2rpx solid #eee;
}

.item .poster{
   width:128rpx;
   height:128rpx;
   margin-right:20rpx;
}

.item .meta{
  flex:1;
}

.item .title,.item .sub-title{
  display:block;
  margin-bottom:14rpx;
}

.item .title{
  font-size:32rpx;
}

.item .sub-title{
  font-siez:22rpx;
  color:#c0c0c0;
}

.item .artists{
   font-siez:26rpx;
   color:#999;
}

.item .rating{
  font-siez:28rpx;
  font-weight:bold;
  color:red; 
}

每当我们点击其中一部电影时，出现如下页面

这里我使用navigatotr组件，而我所跳转的页面事如何得知我点击的是哪部电影呢？这里在navigator组件的ulr属性传一个参数给另一个页面，参数是电影的id，id是唯一的

在另一个页面我则需要对这部电影资源进行访问，所以还需要发起请求

movie.js

var API_URL = 'https://douban.uieee.com/v2/movie/subject/'

// pages/movie/movie.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    movie:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
     console.log(options);
     wx.request({
        url:API_URL+options.id,
        data:{},
        header:{
          'Content-Type':'json'
        },
        success:function(res){
          console.log(res.data);
          that.setData({
            movie:res.data
          });
        }
     });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

movie.wxml

<!--pages/movie/movie.wxml-->
<scroll-view class="page-body" scroll-y="true">
       <view class="meta">
          <image class="poster" src="{{movie.images.large}}" background-size="cover"></image>
             <text class="title">{{movie.title}}({{movie.year}})</text>
             <text class="info">
                评分：{{movie.rating.average}}
             </text>
             <text class="info">
                导演：<block wx:for="{{movie.directors}}">{{item.name}}</block>
             </text>
             <text class="info">
                主演：<block wx:for="{{movie.casts}}">{{item.name}} </block>
             </text>
       </view>
       <view class="summary">
         <text class="label">摘要：</text>
         <text class="content">{{movie.summary}}</text>
       </view>
</scroll-view>

movie.wxss

/* pages/movie/movie.wxss */

.meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:1000rpx;
  padding:50rpx 40rpx;
}

.poster{
  width:80%;
  height:80%;
  margin:20rpx;
}

.title{
    font-weight:bold;
}

.info{
    font-size:30rpx;
    color:#999;
    padding-left:0rpx;
}

.summary{
  width:80%;
  margin:30rpx auto;
}

.label{
  display:block;
}

.content{
  color:#666;
  font-siez:20rpx;
  padding:10rpx;
}