微信小程序--搜索电影app（续）

热门推荐页面各个文件代码如下：

recommendMovies.wxml：

<view class="wrapper">
  <view wx:for="{
   {topMovies}}" wx:for-item="item">
    <view class="content">
      <view class="picView">
        <image class="pic" src="{
   {item.images.medium}}" id="{
   {item.id}}" bindtap="toDetail" />
      </view>
      <view class="info">
        <view class="name">
          名称：{
   {item.title}}
        </view>
        <view class="score">{
   {item.rating.average}}分</view>
        <view class="type">
          类型：
          <block wx:for="{
   {item.genres}}" wx:for-item="type">
            {
   {type}},
            <!--注意不要使用<view>，不然调不出效果。。-->
          </block>
        </view>
        <view class="director">
          导演：
          <block wx:for="{
   {item.directors}}" wx:for-item="director">
            {
   {director.name}},
          </block>
        </view>
        <view class="actor">
          演员：
          <block wx:for="{
   {item.casts}}" wx:for-item="actor">
            {
   {actor.name}},
          </block>
        </view>
        <view class="time">年份： {
   {item.year}}</view>
      </view>
    </view>
  </view>
</view>

recommendMovies.wxss：

.wrapper{
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}
.slide-image{
  width:750rpx;
  height:100%;
}

.content{
  width:100%;
  height:300rpx;
  padding:10rx;
  display: flex;
  flex-direction: row;
  border-bottom: 2rpx solid #CCCCCC;
}
.picView{
  float:left;
  padding:20rpx 15rpx;
}
.pic{
  width:210rpx;
  height:260rpx;
}
.info{
  float:left;
  display: flex;
  flex-direction: column;
  color:#888888;
  padding-top:20rpx;
  font-size: 30rpx;
}
.name{
  color:#000;
  width:100%;
  font-size: 32rpx;
  margin-bottom: -19rpx;
}
.score{
  position: relative;
  width:80rpx;
  float:right;
  top:-18rpx;
  color:#8C5A0D;
  right:-433rpx;
}
.type{
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;
}
.director{
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;  
}
.actor{
  margin-bottom: 10rpx;
}

recommendMovies.js：

//recommendMovies.js
var util = require('../../utils/util.js')
Page({
  data: { 
  },
  onLoad: function () {
    /*
    var city = wx.getStorageSync('city');
    console.log('只在初次进入此页面时执行一次');
    var topMovies = wx.getStorageSync('topMovies'+city);
    if (!topMovies){
      console.log('request');
      this.requestTopMovies();
    }else{
      console.log('storage');
      this.setData({
         topMovies:topMovies
      });
    }
     */
  },
  onShow: function () {
    /* var city = wx.getStorageSync('city'); */
    console.log('每次进入此页面都会执行此函数，适合放需要实时调用页面逻辑的代码');
    /*经测试，此处不需要加city特判，因为请求排行榜靠前的电影时不需要加city参数.
    var topMovies = wx.getStorageSync('topMovies' + city);*/
    var topMovies = wx.getStorageSync('topMovies'