微信小程序之“豆瓣电影”

最新推荐文章于 2024-04-23 10:04:21 发布

蓝莓小蛋糕.

最新推荐文章于 2024-04-23 10:04:21 发布

阅读量1.2w

点赞数 23

文章标签： javascript 小程序

微信小程序之“豆瓣电影”

一、需求分析

1、首页

2.搜索页

3.列表页

4.详情页

任务1.2 项目准备
1.微信开发者工具
2. 整理初始代码，删除部分文件及代码
3.新建所需页面如下

二、自定义组件封装

1. 打开searchbar.wxml文件，添加如下代码：

<view class="searchbar">
  <navigator wx:if="{{isnavigator}}" url='/pages/search/search' class='search-navigator'></navigator>
  <view wx:else class="search-input-group">
    <input class='search-input' placeholder='搜索' bindinput='onInputEvent'></input>
  </view>
</view>

2.打开searchbar.wxss文件,代码如下：

.searchbar{
  background-color: #41be57;
  padding: 20rpx;
}
.search-navigator{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  background-image: url("base64代码");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 8%;
}
.search-input-group{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}
.search-input{
  min-height: 40rpx;
  height: 40rpx;
  font-size: 12px;
}


*[base64代码]:  需将搜索图标转换为base64格式展示，提供在线转换工具：http://tool.chinaz.com/tools/imgtobase/

3. 打开searchbar.js文件，添加如下代码

// components/searchbar/searchbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isnavigator: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onInputEvent: function(event){
      var value = event.detail.value;
      var detail = {"value": value};
      var options = {};
      this.triggerEvent("searchinput",detail,options);
    }
  }
})

4. 打开searchbar.js文件，添加如下代码

{
  "component": true,
  "usingComponents": {}
}

5.打开index.json文件，添加代码：

{
  "usingComponents": {
    "searchbar": "/components/searchbar/searchbar",
    "indexmodule": "/components/indexmodule/indexmodule"
  }
}

6.打开index.js文件，添加代码：

import {network} from "../../utils/network.js";

Page({
  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // MVC：Model,View,Controller
    var that = this;
    // 电影
    network.getMovieList({
      success: function(movies){
        
        that.setData({
          movies: movies
        });
      }
    });

    // 电视剧
    network.getTVList({
      success: function(tvs){
        that.setData({
          tvs: tvs
        });
      }
    });

    // 综艺
    network.getShowList({
      success: function (shows) {
        console.log(shows)
        that.setData({
          shows: shows
        });
      }
    });
  }
})

7.打开index.wxml文件，添加代码：

<searchbar isnavigator="{{true}}"></searchbar>

<!-- 电影 -->
<indexmodule title="电影" items="{{movies}}" moreurl="/pages/list/list?type=movie" type="movie"></indexmodule>

<!-- 电视剧 -->
<indexmodule title="电视剧" items="{{tvs}}" moreurl="/pages/list/list?type=tv" type="tv"></indexmodule>

<!-- 综艺 -->
<indexmodule title="综艺" items="{{shows}}" moreurl="/pages/list/list?type=show" type="show"></indexmodule>

8. 打开stars.wxml文件，添加如下代码：

<view class='rate-group'>
  <image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{lights}}" wx:key="*this" src="/images/rate_light.png"></image>
  <image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{halfs}}" wx:key="*this" src='/images/rate_half.png'></image>
  <image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{grays}}" wx:key="*this" src='/images/rate_gray.png'></image>
  <text wx:if="{{istext}}" style='font-size:{{fontsize}}rpx;color:{{fontcolor}};'>{{ratetext}}</text>
</view>

9. 打开stars.wxss文件,为视图层添加样式文件，代码如下

.rate-group{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  color: #ccc;
}
.rate-group image{
  width: 20rpx;
  height: 20rpx;
}

10. 打开stars.js，添加代码：

 Component({
  /**
   * 组件的属性列表
   */
  properties: {
    rate: {
      type: Number,
      value: 0,
      observer(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
        this.updateRate();
      }
    },
    starsize: {
      type: Number,
      value: 20 //rpx
    },
    fontsize: {
      type: Number,
      value: 20 // rpx
    },
    fontcolor: {
      type: String,
      value: "#ccc"
    },
    istext: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    updateRate: function(){
      var that = this;
      var rate = that.properties.rate;
      var intRate = parseInt(rate);
      var light = parseInt(intRate / 2);
      var half = intRate % 2;
      var gray = 5 - light - half;
      var lights = [];
      var halfs = [];
      var grays = [];
      for (var index = 1; index <= light; index++) {
        lights.push(index);
      }
      for (var index = 1; index <= half; index++) {
        halfs.push(index);
      }
      for (var index = 1; index <= gray; index++) {
        grays.push(index);
      }
      var ratetext = rate && rate > 0 ? rate.toFixed(1) : "未评分"
      that.setData({
        lights: lights,
        halfs: halfs,
        grays: grays,
        ratetext: ratetext
      });
    }
  },

  lifetimes: {
    attached: function(){
      this.updateRate();
    }
  }
})

11. 打开stars.json，添加代码：

{
  "component": true,
  "usingComponents": {}
}

12. 打开itemview.json文件，添加代码：

{
  "component": true,
  "usingComponents": {
    "stars": "/components/stars/stars"
  }
}

13. 打开itemview.wxml文件，添加如下代码：

<navigator wx:if="{{item}}" class='item-navigator' url="{{itemurl}}">
  <view class='item-group'>
    <view class='thumbnail-group'>
      <image class='thumbnail' src='{{item.cover.url}}'></image>
    </view>
    <view class='item-title'>{{item.title}}</view>
    <stars rate="{{item.rating.value}}"></stars>
  </view>
</navigator>

<view wx:else class="item-navigator"></view>

14.打开itemview.wxss文件,代码如下

.item-navigator{
  width: 200rpx;
  margin-right: 20rpx;
  display: inline-block;
}

.item-navigator .item-group{
  width: 100%;
}

.item-group .thumbnail-group{
  width: 100%;
  height: 284rpx;
}

.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}

.item-group .item-title{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 20rpx;
}

15.打开itemview.js文件,添加如下代码：

// components/itemview/itemview.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: {
      type: Object,
      value: {}
    },
    itemurl: {
      type: String,
      value: ""
    }

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

16.打开itemview.json文件,添加如下代码：

{
  "component": true,
  "usingComponents": {
    "stars": "/components/stars/stars"
  }
}

17.打开indexmodule.json文件,添加组件引用代码：

{
  "component": true,
  "usingComponents": {
    "itemview": "/components/itemview/itemview"
  }
}

18.打开indexmodule.wxss文件,代码如下：

.module-group{
  padding: 40rpx;
  background-color: #fff;
}

.module-group .module-top{
  font-size: 36rpx;
  display: flex;
  justify-content: space-between;
}

.module-top .module-title{
  color: #494949;
}

.module-top .module-more{
  color: #41be57;
}

.module-scroll-view{
  margin-top: 40rpx;
  width: 100%;
  height: 400rpx;
  white-space: nowrap;
}

19.打开indexmodule.wxml文件，添加如下代码：

<view class='module-group'>
  <view class='module-top'>
    <view class='module-title'>{{title}}</view>
    <navigator url="{{moreurl}}" class='module-more'>更多</navigator>
  </view>
  <scroll-view class='module-scroll-view' scroll-x="{{true}}">
    <itemview wx:for="{{items}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}"></itemview>
  </scroll-view>
</view>

20.打开indexmodule.js文件,添加如下代码：

// components/indexmodule/indexmodule.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ""
    },
    moreurl: {
      type: String,
      value: ""
    },
    items: {
      type: Array,
      value: []
    },
    type: {
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

21. 打开onecomment.json文件，添加代码：

{
  "component": true,
  "usingComponents": {
    "stars": "/components/stars/stars"
  }
}

22. 打开onecomment.js文件，添加代码：

// components/onecomment/onecomment.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

23. 打开onecomment.wxml文件，添加代码：

<view class='comment-group'>
  <view class='left-comment'>
    <image class="avatar" src="{{item.user.avatar}}"></image>
  </view>
  <view class='right-comment'>
    <view class='username-rate'>
      <text class='username'>{{item.user.name}}</text>
      <stars rate="{{item.rating.value*2}}" starsize="30" istext='{{false}}'></stars>
    </view>
    <view class="release-time">{{item.create_time}}</view>
    <view class='content'>{{item.comment}}</view>
  </view>
</view>

24. 打开onecomment.wxss文件，添加代码：

.comment-group{
  display: flex;
  justify-content: flex-start;
  padding-top: 40rpx;
}

.comment-group .left-comment{
  width: 70rpx;
  margin-right: 20rpx;
}
.left-comment .avatar{
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.comment-group .right-comment{
  flex: 1;
}

.right-comment .username-rate{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.username-rate .username{
  font-size: 36rpx;
  margin-right: 20rpx;
}

.release-time{
  color: #b3b3b3;
  font-size: 32rpx;
  margin-top: 10rpx;
}

.content{
  font-size: 32rpx;
  color: #353535;
  margin-top: 10rpx;
}

三、首页功能

1. 打开urls.js文件,添加如下代码

const globalUrls = {
  movieList: "https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items",
  tvList: "https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items",
  showList: "https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items",
  movieDetail: "https://m.douban.com/rexxar/api/v2/movie/",
  tvDetail: "https://m.douban.com/rexxar/api/v2/tv/",
  showDetail: "https://m.douban.com/rexxar/api/v2/tv/",
  movieTags: function(id){
    return "https://m.douban.com/rexxar/api/v2/movie/"+ id +"/tags?count=8"
  },
  tvTags: function(id){
    return "https://m.douban.com/rexxar/api/v2/tv/"+id+"/tags?count=8"
  },
  showTags: function(id){
    return this.tvTags(id);
  },
  movieComments: function(id,start=0,count=3){
    return 'https://m.douban.com/rexxar/api/v2/movie/' + id + '/interests?count=' + count + '&start=' + start;
  },
  tvComments: function(id,start=0,count=3){
    return 'https://m.douban.com/rexxar/api/v2/tv/' + id + '/interests?count=' + count + '&start=' + start;
  },
  showComments: function(id,start=0,count=3){
    return this.tvComments(id,start,count);
  },
  searchUrl: function (q) {
    return "https://m.douban.com/rexxar/api/v2/search?q=" + q
  }
}

export {globalUrls}

2.network.js文件,添加如下代码：

import { globalUrls } from "urls.js";

const network = {
  // 获取电影列表
  getMovieList: function (params) {
    params.type = "movie";
    this.getItemList(params);
  },

  // 获取电视剧列表
  getTVList: function (params) {
    params.type = "tv";
    this.getItemList(params);
  },

  // 获取综艺列表
  getShowList: function (params) {
    params.type = "show";
    this.getItemList(params);
  },

  // 获取item列表
  getItemList: function(params){
    var url = "";
    if(params.type === 'movie'){
      url = globalUrls.movieList;
    }else if(params.type === 'tv'){
      url = globalUrls.tvList;
    }else{
      url = globalUrls.showList;
    }
    var count = params.count ? params.count : 7;
    wx.request({
      url: url,
      data: {
        count: count
      },
      success: function (res) {
        var items = res.data.subject_collection_items;
        var itemsCount = items.length;
        var left = itemsCount%3;
        if(left === 2){
          items.push(null);
        }
        if (params && params.success) {
          params.success(items);
        }
      }
    });
  },

  // 获取详情
  getItemDetail: function(params){
    var type = params.type;
    var id = params.id;
    var url = "";
    if(type === 'movie'){
      url = globalUrls.movieDetail + id;
    }else if(type === 'tv'){
      url = globalUrls.tvDetail + id;
    }else{
      url = globalUrls.showDetail + id;
    }
    wx.request({
      url: url,
      success: function(res){
        var item = res.data;
        if(params.success){
          params.success(item);
        }
      }
    })
  },

  // 获取标签
  getItemTags: function(params){
    var type = params.type;
    var id = params.id;
    var url = "";
    if(type === 'movie'){
      url = globalUrls.movieTags(id);
    }else if(type === 'tv'){
      url = globalUrls.tvTags(id);
    }else{
      url = globalUrls.showTags(id);
    }
    console.log(url)
    wx.request({
      url: url,
      success: function(res){
        var tags = res.data.tags;
        if(params.success){
          params.success(tags);
        }
      }
    })
  },

  // 获取短评
  getItemComments: function(params){
    var type = params.type;
    var id = params.id;
    var start = params.start?params.start:0;
    var count = params.count?params.count:3;
    var url = "";
    if(type === 'movie'){
      url = globalUrls.movieComments(id,start,count);
    }else if(type === 'tv'){
      url = globalUrls.tvComments(id,start,count);
    }else{
      url = globalUrls.showComments(id,start,count);
    }
    wx.request({
      url: url,
      success: function(res){
        var data = res.data;
        if(params.success){
          params.success(data);
        }
      }
    })
  },

  // 搜索item
  getSearch: function(params){
    var q = params.q;
    var url = globalUrls.searchUrl(q);
    wx.request({
      url: url,
      success: function(res){
        console.log("---------2")
        console.log(res)
        var subjects = res.data.subjects;
        if(params.success){
          params.success(subjects);
        }
      }
    })
  }
}

export { network }

四、列表页功能

1. 打开list.json文件,添加组件引用代码

{
  "usingComponents": {
    "searchbar": "/components/searchbar/searchbar",
    "itemview": "/components/itemview/itemview"
  }
}

2. 打开list.wxml文件，添加如下代码

<searchbar isnavigator="{{true}}"></searchbar>
<view class='container'>
  <itemview wx:for="{{items}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}"></itemview>
</view>

3 打开list.wxss文件，添加如下代码:

.container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30rpx;
}

4. 打开list.js文件,添加如下代码：

// pages/list/list.js
import {network} from "../../utils/network.js";
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var type = options.type;
    that.setData({
      type:type
    });
    var title = "";
    wx.showLoading({
      title: '正在加载中...',
    })
    if(type === "movie"){
      // 请求电影的数据
      network.getMovieList({
        success: function (items) {
          that.setData({
            items: items
          });
          wx.hideLoading();
        },
        count: 1000
      });
      title = "电影";
    }else if(type === 'tv'){
      // 请求电视剧的数据
      network.getTVList({
        success: function (items) {
          that.setData({
            items: items
          });
          wx.hideLoading();
        },
        count: 1000
      });
      title = "电视剧";
    }else{
      // 请求综艺的数据
      network.getShowList({
        success: function (items) {
          that.setData({
            items: items
          });
          wx.hideLoading();
        },
        count: 1000
      });
      title = "综艺";
    }
    wx.setNavigationBarTitle({
      title: title,
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

五、搜索功能

1. 打开search.json文件,添加组件引用代码：

{
  "usingComponents": {
    "searchbar": "/components/searchbar/searchbar"
  }
}

2. 打开search.wxml文件，添加如下代码：

<searchbar bindsearchinput="onSearchInputEvent"></searchbar>

<view class='history-list-group' wx:if="{{histories && !subjects}}">
  <view class='history-title'>
    <view class='title'>历史记录</view>
    <view class='clear' bindtap="onClearEvent">清除</view>
  </view>
  <navigator wx:for="{{histories}}" wx:key="{{item.id}}" url='/pages/detail/detail?type={{item.type}}&id={{item.id}}' class='history-group'>{{item.title}}</navigator>
</view>

<view class='item-list-group'>
  <view wx:for="{{subjects}}" class='item-group' wx:key="{{item.id}}" bindtap="onItemTapEvent" data-id="{{item.id}}" data-title="{{item.title}}" data-type="{{item.type}}">
    <image src='{{item.pic.normal}}' class='thumbnail'></image>
    <view class='info-group'>
      <view class='title'>{{item.title}}</view>
      <view class='rate-year'>{{item.rating.value}}分/{{item.year}}</view>
    </view>
  </view>
</view>

3. 打开search.wxss文件，添加如下代码

.item-list-group{
  padding: 10rpx 20rpx;
}

.item-list-group .item-group{
  padding: 10rpx 0;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
}

.item-group .thumbnail{
  width: 80rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.item-group .info-group{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-group .title{
  font-size: 32rpx;
}

.info-group .rate-year{
  font-size: 28rpx;
  color: #7b7b7b;
}

.history-list-group{
  padding: 10rpx 20rpx;
}

.history-list-group .history-title{
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  background: #f9f9f9;
  font-size: 28rpx;
  color: #9e9e9e;
}

.history-list-group .history-group{
  font-size: 32rpx;
  padding: 20rpx 0;
  border-bottom: 1px solid #e4e4e4;
}

4. 打开search.js文件,添加组件引用代码：

// pages/search/search.js
import {network} from "../../utils/network.js";

Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.getStorage({
      key: 'searched',
      success: function(res) {
        var data = res.data;
        console.log("--------")
        console.log(data)
        that.setData({
          histories: data
        })
      },
    })
  },

  onSearchInputEvent: function(event){
    var that = this;
    var value = event.detail.value;
    if(!value || value === ""){
      that.setData({
        subjects: null
      });
      return;
    }
    network.getSearch({
      q: value,
      success: function(subjects){
        console.log(subjects)
        that.setData({
          subjects: subjects
        })
      }
    })
  },

  onItemTapEvent: function(event){

    var that = this;
    var id = event.currentTarget.dataset.id;
    var type = event.currentTarget.dataset.type;
    var title = event.currentTarget.dataset.title;
    var histories = that.data.histories;
    var isExisted = false;
    if(histories){
      for(var index=0;index<histories.length;index++){
        var movie = histories[index];
        if(movie.id === id){
          isExisted = true;
          break;
        }
      }
    }
    if(!isExisted){
      if(!histories){
        histories = [];
      }
      histories.push({ title: title, id: id, type: type});
      wx.setStorage({
        key: 'searched',
        data: histories,
        success: function () {
          console.log("保存成功！");
        }
      })
    }
    
    wx.navigateTo({
      url: "/pages/detail/detail?type=" + type+"&id="+id,
    });
  },

  onClearEvent: function(event){
    wx.removeStorage({
      key: 'searched',
      success: function(res) {
        console.log("删除成功！");
      },
    });
    this.setData({
      histories: null
    });
  }
})

六、详情页功能

1. 打开detail.json文件,添加组件引用代码

 "stars": "/components/stars/stars"
 "onecomment":"/components/onecomment/onecomment"

2. 打开detail.wxml文件，添加如下代码：

 <view class="item-header">
  <view class="item-title">{{item.title}} {{item.original_title}}({{item.year}})</view>
  <view class='item-detail'>
    <view class="left-detail">
      <view class="item-rate">
        <stars rate="{{item.rating.value}}" starsize="30" fontsize="30" fontcolor="#595959"></stars>
        <text class="comment-persons">{{item.rating.value}}人评价</text>
      </view>
      <view class="item-sub-detail">
        <view class="item-type">
          {{item.durations[0]}} {{item.genres}}
        </view>
        <view class="item-show">
          {{item.pubdate[0]}}上映 {{item.countries[0]}}
        </view>
        <view class="item-actors">
          {{item.authors}}
        </view>
      </view>
    </view>
    <view class='right-detail'>
      <image src="{{item.cover.image.small.url}}"></image>
    </view>
  </view>
</view>

<view class='item-tags'>
  <view class='item-tags-title'>豆瓣成员常用标签</view>
  <view class='item-tags-list'>
    <text wx:for="{{tags}}" wx:key="*this">{{item}}</text>
  </view>
</view>

<view class='comment-list-group'>
  <view class='comment-title'>短评({{totalComment}})</view>
  <onecomment wx:for="{{comments}}" item="{{item}}"></onecomment>
</view>

<navigator class='more-comment' url='/pages/comment/comment?id={{id}}&type={{type}}&thumbnail={{item.cover.image.small.url}}&title={{item.title}}&rate={{item.rating.value}}'>查看更多短评</navigator>

3. 打开detail.wxss文件，添加如下代码:

 .item-header{
  padding: 60rpx 30rpx;
}

.item-header .item-title{
  font-size: 50rpx;
}

.item-header .item-detail{
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.item-detail .left-detail{
  flex: 1;
  margin-right: 20rpx;
}

.left-detail .item-rate{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.item-rate .comment-persons{
  font-size: 28rpx;
  color: #ccc;
  margin-left: 20rpx;
}

.item-detail .right-detail{
  width: 200rpx;
  height: 300rpx;
}

.right-detail image{
  width: 100%;
  height: 100%;
}

.item-sub-detail{
  margin-top: 40rpx;
  font-size: 32rpx;
}

.item-sub-detail view{
  margin-bottom: 10rpx;
}

.item-tags{
  padding: 0 30rpx;
}

.item-tags .item-tags-title{
  color: #b3b3b3;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.item-tags .item-tags-list{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item-tags-list text{
  padding: 10rpx 20rpx;
  background: #f5f5f5;
  font-size: 32rpx;
  color: #353535;
  text-align: center;
  border-radius: 40rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.comment-list-group{
  padding: 60rpx 30rpx;
}

.comment-list-group .comment-title{
  font-size: 32rpx;
  color: #b3b3b3;
}

.more-comment{
  text-align: center;
  font-size: 36rpx;
  color: #41be57;
  margin-bottom: 60rpx;
}

4. 打开detail.js文件，添加如下代码：

// pages/detail/detail.js
import {network} from "../../utils/network.js";

Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var type = options.type;
    var id = options.id;
    that.setData({
      id: id,
      type: type
    });
    network.getItemDetail({
      type: type,
      id: id,
      success: function(item){
        console.log(item)
        var genres = item.genres;
        genres = genres.join("/");
        item.genres = genres;
        var actors = item.actors;
        var actorNames = [];
        if(actors.length > 3){
          actors = actors.slice(0,3);
        }
        for(var index=0; index<actors.length; index++){
          var actor = actors[index];
          actorNames.push(actor.name);
        }
        var authors=""
        actorNames = actorNames.join("/");
        if(type=="show"){
          authors = actorNames;
        }else{
          var director = item.directors[0].name;
          authors = director + "(导演) /" + actorNames;
        }
        
        item.authors = authors;
        that.setData({
          item: item
        });
      }
    });

    network.getItemTags({
      type: type,
      id: id,
      success: function(tags){
        console.log(tags)
        that.setData({
          tags: tags
        });
      }
    });

    // 获取评论
    network.getItemComments({
      type: type,
      id: id,
      success: function(data){
        console.log(data)
        var totalComment = data.total;
        var comments = data.interests;
        that.setData({
          totalComment: totalComment,
          comments: comments
        });
      }
    });
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.pageScrollTo({
      scrollTop: 0,
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

七、短评列表功能

1. 打开comment.json文件,添加组件引用代码：

{
  "usingComponents": {
    "onecomment": "/components/onecomment/onecomment"
  }
}

2. 打开comment.wxml文件，添加如下代码：

<view class="container">
  <view class="item-group" bindtap="onItemTapEvent">
    <image class="thumbnail" src='{{thumbnail}}'></image>
    <text class='item-title'>{{title}}</text>
    <text class='item-rate'>{{rate}}分</text>
  </view>

  <view class='comment-title'>全部影评({{total}})</view>

  <onecomment wx:for="{{comments}}" item="{{item}}"></onecomment>

  <view class='page-btn-group'>
    <button class='page-btn' bindtap='onPrePageTap' disabled='{{start <= 1}}' loading="{{preLoading}}">上一页</button>
    <button class='page-btn' bindtap='onNextPageTap' loading='{{nextLoading}}'>下一页</button>
  </view>
</view>

3. 打开comment.wxss文件，添加如下代码:

.container{
  padding: 20rpx 30rpx;
}

.item-group{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.item-group .thumbnail{
  width: 40rpx;
  height: 50rpx;
}

.item-group .item-title{
  font-size: 32rpx;
  color: #41be57;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.item-group .item-rate{
  font-size: 28rpx;
  color: #ccc;
}

.comment-title{
  margin-top: 60rpx;
  font-size: 40rpx;
}

.page-btn-group{
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.page-btn{
  flex: 1;
  height: 60rpx;
  color: #898989;
  border-color: #898989;
  line-height: 60rpx;
}

4. 打开comment.js文件,添加如下代码：

// pages/comment/comment.js
import {network} from "../../utils/network.js";

Page({

  /**
   * 页面的初始数据
   */
  data: {
    total: 0,
    start: 1,
    count: 20
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData(options);
    that.getComments(1);
  },

  getComments: function(start){
    var that = this;
    var type = that.data.type;
    console.log(type)
    var id = that.data.id;
    if(start > that.data.start){
      that.setData({
        nextLoading: true
      });
    }else{
      that.setData({
        preLoading: true
      });
    }
    network.getItemComments({
      type: type,
      id: id,
      start: start,
      count: 20,
      success: function (data) {
        console.log(data)
        var total = data.total;
        var comments = data.interests;
        console.log(comments);
        that.setData({
          total: total,
          comments: comments,
          start: start,
          preLoading: false,
          nextLoading: false
        });
        wx.pageScrollTo({
          scrollTop: 0,
        })
      }
    })
  },

  onItemTapEvent: function(event){
    wx.navigateBack({});
  },

  onPrePageTap: function(event){
    var that = this;
    var oldStart = that.data.start;
    var count = that.data.count;
    if(oldStart - count > 0){
      var start = oldStart - count;
      that.getComments(start);
    }
  },

  onNextPageTap: function(event){
    var that = this;
    var oldStart = that.data.start;
    var start = oldStart + that.data.count;
    that.getComments(start);
  }
})

5.打开network.js文件，添加如下代码：

import { globalUrls } from "urls.js";

const network = {
  // 获取电影列表
  getMovieList: function (params) {
    params.type = "movie";
    this.getItemList(params);
  },

  // 获取电视剧列表
  getTVList: function (params) {
    params.type = "tv";
    this.getItemList(params);
  },

  // 获取综艺列表
  getShowList: function (params) {
    params.type = "show";
    this.getItemList(params);
  },

  // 获取item列表
  getItemList: function(params){
    var url = "";
    if(params.type === 'movie'){
      url = globalUrls.movieList;
    }else if(params.type === 'tv'){
      url = globalUrls.tvList;
    }else{
      url = globalUrls.showList;
    }
    var count = params.count ? params.count : 7;
    wx.request({
      url: url,
      data: {
        count: count
      },
      success: function (res) {
        var items = res.data.subject_collection_items;
        var itemsCount = items.length;
        var left = itemsCount%3;
        if(left === 2){
          items.push(null);
        }
        if (params && params.success) {
          params.success(items);
        }
      }
    });
  },

  // 获取详情
  getItemDetail: function(params){
    var type = params.type;
    var id = params.id;
    var url = "";
    if(type === 'movie'){
      url = globalUrls.movieDetail + id;
    }else if(type === 'tv'){
      url = globalUrls.tvDetail + id;
    }else{
      url = globalUrls.showDetail + id;
    }
    wx.request({
      url: url,
      success: function(res){
        var item = res.data;
        if(params.success){
          params.success(item);
        }
      }
    })
  },

  // 获取标签
  getItemTags: function(params){
    var type = params.type;
    var id = params.id;
    var url = "";
    if(type === 'movie'){
      url = globalUrls.movieTags(id);
    }else if(type === 'tv'){
      url = globalUrls.tvTags(id);
    }else{
      url = globalUrls.showTags(id);
    }
    console.log(url)
    wx.request({
      url: url,
      success: function(res){
        var tags = res.data.tags;
        if(params.success){
          params.success(tags);
        }
      }
    })
  },

  // 获取短评
  getItemComments: function(params){
    var type = params.type;
    var id = params.id;
    var start = params.start?params.start:0;
    var count = params.count?params.count:3;
    var url = "";
    if(type === 'movie'){
      url = globalUrls.movieComments(id,start,count);
    }else if(type === 'tv'){
      url = globalUrls.tvComments(id,start,count);
    }else{
      url = globalUrls.showComments(id,start,count);
    }
    wx.request({
      url: url,
      success: function(res){
        var data = res.data;
        if(params.success){
          params.success(data);
        }
      }
    })
  },

  // 搜索item
  getSearch: function(params){
    var q = params.q;
    var url = globalUrls.searchUrl(q);
    wx.request({
      url: url,
      success: function(res){
        console.log("---------2")
        console.log(res)
        var subjects = res.data.subjects;
        if(params.success){
          params.success(subjects);
        }
      }
    })
  }
}

export { network }

蓝莓小蛋糕.

关注

23
点赞
踩
150

收藏

觉得还不错? 一键收藏
10
评论
微信小程序之“豆瓣电影”

微信小程序之“豆瓣电影”一、需求分析1、首页2.搜索页3.列表页4.详情页任务1.2 项目准备1.微信开发者工具2. 整理初始代码，删除部分文件及代码3.新建所需页面如下二、自定义组件封装1. 打开searchbar.wxml文件，添加如下代码：<view class="searchbar"> <navigator wx:if="{{isnavigator}}" url='/pages/search/search' class='search-na
复制链接

扫一扫