微信小程序开发（五）

发表于 | 更新于 | 分类于 |

更多页面，和电影详情页面，如何使用上拉刷新、下拉加载。

加载更多页面

整个直接调用movieGridTemplate模版，即可。

movies-more

CDOE

pages/movies/more-movies/more-movies.wxml
1
2
3
<import src="../movie-grid/movie-grid-template.wxml" />

<template is="movieGridTemplate" data="{{movies}}"/>
pages/movies/more-movies/more-movies.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
var util = require("../../../utils/util.js");
var app = getApp();

Page({
  data: {
    movies: {},
    navigationbartitle: "",
    requesUrl: "",
    totalCount: 0,
    isEmpty: true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var category = options.titles;
    this.data.navigationbartitle = category;
    var dataUrl = "";
    //  console.log(category)
    switch (category) {
      case "正在热映":
        var dataUrl = app.globalData.doubanBase + "/v2/movie/in_theaters";
        break;
      case "即将上映":
        var dataUrl = app.globalData.doubanBase + "/v2/movie/coming_soon";
        break;
      case "豆瓣Top250":
        var dataUrl = app.globalData.doubanBase + "/v2/movie/top250";
        break;
    }
    this.data.requesUrl = dataUrl;
    util.http(dataUrl, this.processDoubanData)
  },
  //电影数据加载。
  // onScrollLower: function (event) {
  //   var nextUrl = this.data.requesUrl + "?start=" + this.data.totalCount + "&count=20";
  //   util.http(nextUrl, this.processDoubanData);
  //   wx.showNavigationBarLoading();
  // },
  // 用<scroll-view>会出现顶端空白条。并触发不了ScrollLower函数采用onReachBottom
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function (event) {
    var nextUrl = this.data.requesUrl + "?start=" + this.data.totalCount + "&count=20";
    util.http(nextUrl, this.processDoubanData);
    wx.showNavigationBarLoading();
  },
  /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
  onPullDownRefresh: function (event) {
    var requesUrl = this.data.requesUrl + "?start=0&count=20";
    this.data.movies = {};
    this.data.isEmpty = true;
    util.http(requesUrl, this.processDoubanData);
    wx.showNavigationBarLoading();
  },

  //星级评分，电影名，海报，评分，ID
  processDoubanData: function (moviesDouban) {
    var movies = [];
    for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx];
      var title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0, 6) + "...";
      }
      var temp = {
        stars: util.convertToStarsArray(subject.rating.stars),
        title: title,
        average: subject.rating.average,
        coveragUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp)
    }
    //豆瓣API数据，数据合并。（下拉刷新）
    var totalMovies = {};
    if (!this.data.isEmpty) {
      totalMovies = this.data.movies.concat(movies);
    }
    else {
      totalMovies = movies;
      this.data.isEmpty = false;
    }
    //console.log(movies)
    this.setData({
      movies: totalMovies
    });
    this.data.totalCount += 20;
    wx.hideNavigationBarLoading();
    wx.stopPullDownRefresh();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  //电影排行页面标题。
  onReady: function (event) {
    wx.setNavigationBarTitle({
      title: this.data.navigationbartitle,
      success: function (res) {
      }
    })
  },
  // 电影页面详情
  onMovieTap: function (event) {
    var movieId = event.currentTarget.dataset.movieid;
    wx.navigateTo({
      url: '../movie-detail/movie-detail?id=' + movieId
    })
  },
  
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
pages/movies/more-movies/more-movies.josn
1
2
3
4
{
//开启下拉刷新，因微信原因要到josn申明下。
    "enablePullDownRefresh": true  
}
pages/movies/more-movies/more-movies.wxss
1
@import "../movie-grid/movie-grid-template.wxss";

电影详情页面

movies-details

CODE

pages/movies/movie-detail/movie-detail.wxml
<import src="../stars/stars-template.wxml" />
<view class="md-container">
  <image class="head-img" src="{{movie.movieImg}}" mode="aspectFill" />
  <view class="head-img-hover" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg">
    <text class="main-title">{{movie.title}}</text>
    <text class="sub-title">{{movie.country + " . " + movie.year}}</text>
    <view class="like">
      <text class="highlight-font">{{movie.wishCount}}</text>
      <text class="plain-font">人喜欢</text>
      <text class="highlight-font">{{movie.commentCount}}</text>
      <text class="plain-font">条评论</text>
    </view>
  </view>
  <image class="movie-img" src="{{movie.movieImg}}" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"></image>
  <view class="summary">
    <view class="original-title">
      <text>{{movie.originalTitle}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">评分</text>
      <template is="starsTemplate" data="{{stars:movie.stars, score:movie.score}}" />
    </view>
    <view class="flex-row">
      <text class="mark">导演</text>
      <text>{{movie.director.name}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">影人</text>
      <text>{{movie.casts}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">类型</text>
      <text>{{movie.generes}}</text>
    </view>
  </view>
  <view class="hr"></view>
  <view class="synopsis">
    <text class="synopsis-font">剧情简介</text>
    <text class="summary-content">{{movie.summary}}</text>
  </view>
  <view class="hr"></view>
  <view class="cast">
    <text class="cast-font"> 影人</text>
    <scroll-view class="cast-imgs" scroll-x="true" style="width:100%">
      <block wx:for="{{movie.castsInfo}}" wx:for-item="item">
        <view class="cast-container">
          <image class="cast-img" src="{{item.img}}"></image>
          <text class="cast-name">{{item.name}}</text>
        </view>
      </block>
    </scroll-view>
  </view>
</view>
pages/movies/movie-detail/movie-detail.js
var util = require("../../../utils/util.js");
var app = getApp();

Page({
 //初始化上个页面提取的数据 
  data: {
    movie:{}
  },
  onLoad: function (options) {
    var movieId = options.id;
    var url = app.globalData.doubanBase + "/v2/movie/subject/" + movieId;
    util.http(url,this.processDoubanData);
  },

  // 从豆瓣API，提取有用数据。
  processDoubanData:function(data){
    if (!data) {
      return;
    }
    //某些情况下可能会出现某些数据为空，可能导致乱码用if判断下。一下为举例。
    var director = {
      avatar: "",
      name: "",
      id: ""
    }
    if (data.directors[0] != null) {
      if (data.directors[0].avatars != null) {
        director.avatar = data.directors[0].avatars.large

      }
      director.name = data.directors[0].name;
      director.id = data.directors[0].id;
    }
    var movie = {
      movieImg: data.images ? data.images.large : "",
      country: data.countries[0],
      title: data.title,
      originalTitle: data.original_title,
      wishCount: data.wish_count,
      commentCount: data.comments_count,
      year: data.year,
      generes: data.genres.join("、"),
      stars: util.convertToStarsArray(data.rating.stars),//调用全局js中人名“/”隔开
      score: data.rating.average,
      director: director,
      casts: util.convertToCastString(data.casts),
      castsInfo: util.convertToCastInfos(data.casts),
      summary: data.summary
    }
    this.setData({
      movie:movie
    })
  },
  // 影片海报预览
  viewMoviePostImg:function(event){
    wx.previewImage({
      current: this.data.movie.movieImg , // 当前显示图片的http链接
      urls: [this.data.movie.movieImg] // 需要预览的图片http链接列表
    })
  },
})
pages/movies/movie-detail/movie-detail.josn
{}
pages/movies/movie-detail/movie-detail.wxss
@import "../stars/stars-template.wxss";

.movie-container {
  display: flex;
  flex-direction: column;
  padding: 0 22rpx;
}

.movie-img {
  width: 200rpx;
  height: 270rpx;
  padding-bottom: 20rpx;
}

.movie-title {
  margin-bottom: 16rpx;
  font-size: 24rpx;
}