微信小程序模仿豆瓣评分使用网络请求数据页面交互传值

首页效果图

 

详情页效果图

 

componment组件：

Taps.wxml

Taps.wxss

.searchbar{
  background:#41be57;
  padding: 20rpx 20rpx;
}
.search-navigator{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 6rpx;
  background-image: url("data:image/png;base64,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");
  background-size:8%;
  background-repeat:no-repeat;
  background-position: center; 
}
.search-input-group{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  padding: 6rpx 20rpx;
  box-sizing: border-box;

}
.search-input{
  height: 40rpx;
  font-size: 12px;
}
.xiangshang{
  margin-top: -10rpx;
}

.star{
  height: 60rpx;
  width: 60rpx;
  display: inline-block;
}
.stars-group{
  text-align: center;
   font-size: 60rpx;
  
}

Taps.json

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

Taps.js

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

    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   rate:4,
   light:'',
   gray:'',
   half:'',
   ratenum:''

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

    }

  }
})

评分星星组件

stars.wxml

 
 
 
 {{ratetext}}

stars.wxss

/* component/stars/stars.wxss */
.rate-group{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80rpx;
  color: #ccc;
}
.rate-group image{
  height: 30rpx;
  width: 30rpx;
}

stars.js

// component/stars/stars.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    rate:{
      type:Number,
      value:0,
      observer(newVal,oldVal,changePath){
        //属性被改变时执行的函数（可选）也可以卸载methods断种定义的方法名字符串，如'_propertyChange'
        //通常newVal代表新数据，oldVal就是旧数据
        this.updateRate();
      }
    },
    fontsize:{
      type:Number,
      value:20
    },
    fontcolor:{
      type:String,
      value:"#ccc"
    },
    istext:{
      type:Boolean,
      value:true
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    lights:[1, 2],
    halfs:[1, 2],
    grays:[1, 2], 
    ratetext:"7.3",
    istext:true

  },



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

   }

  },
  /**
   * 组件的方法列表
   */
  
  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 i=1;i<=light;i++){
        lights.push(i)
      }

      for (var i = 1; i <= half; i++) {
        halfs.push(i)
      }

      for (var i = 1; i <= gray; i++) {
        grays.push(i)
      }
      var ratetext = rate && rate > 0 ? rate.toFixed(1):"未评分"
      this.setData({
        lights:lights,
        grays:grays,
        halfs:halfs,
        ratetext:ratetext

      })


  }
  }
})

更多按钮点击跳转的列表页

indexmodle.wxml

 
   {{title}}
   更多
   
  
 
  
 

indexmodle.wxss

/* component/indexmodule/indexmodule.wxss */
.module-group{
  padding: 40rpx;
  background: #fff;
}
.module-top{
  font-size: 36rpx;
  display: flex;
  justify-content: space-between;

}
.module-title{
  color:#494949;
}
.module-more{
  color: #41be57;
}
.module-scroll-view{
  margin-top: 40rpx;
  width: 100%;
  height: 100%;
  white-space:nowrap;

}

indexmodle.json

{
  "component": true,
  "usingComponents": {
    "iterview": "../../component/Iterview/Iterview"
}
}

indexmodle.js

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

  },

更多按钮点击后单个影视组件（包含影视图片，影视名，评分）

Iterview.wxml

 
  
    
   
  {{item.title}}
  
 

Iterview.wxss

/* component/Iterview/Iterview.wxss */
.item-navigator{
  width: 208rpx;
  margin-right: 20rpx;
  display: inline-block;

}
.item-navigator .item-group{
  width: 100%;
 
}
.item-group .thumb-group{
 
  width: 100%;
  height: 300rpx;

}
.thumb-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: 15rpx;
}

Iterview.json

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

Iterview.js

// component/Iterview/Iterview.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    film: {
      type: Array,
      value: {
        name: '',
        src: ''
      }
    },
     item: {
      type: Object,
      value: {}
    },
    itemurl: {
      type: String,
      value: " "

    }

  },
  

详情页组件

onecomment.wxml

  
    
  
  
     
      {{item.user.name}}
      
     
     {{item.create_time}}
     {{item.comment}}
  

onecomment.wxss

/* component/onecomment/onecomment.wxss */
.comment-group {
  display: flex;
  justify-content: flex-start;
  padding-top: 40rpx;
}
.left-comment{
  width: 70rpx;
  margin-right: 20rpx;
}
.left-comment .avatar{
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
.right-comment{
  flex:1;
}
.username-rate{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.username{
  font-size:36rpx;
  margin-right: 20rpx;
  
}
.release-time{
  color: #b3b3b3;
  font-size:32rpx;
  margin-top: 10rpx;
}
.content{
  color:#353535;
  font-size:32rpx;
  margin-top: 10rpx;

}

onecomment.json

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

onecomment.js

// component/onecomment/onecomment.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

   item: {
      type: Object,
      value: []
  },
  },

page页

首页,全部采取自定义组件，直接套用，不需要再设定样式，结构简单

jiaohu.wxml

jiaohu.json

 

{
  "usingComponents": {
    "Taps":"../../component/Taps/Taps",   
    "indexmodule": "../../component/indexmodule/indexmodule"
  
  
  }
}

jiaohu.js

// pages/jiaohu/jiaohu.js
import{network}from "../../utils/network.js"
const app=getApp();
Page({

  /**
   * 页面的初始数据
   */
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    network.getMovieList({
     
      success:function(movies){
        console.log(movies)
        that.setData({
          movies:movies
        }) 
      }
    })
    network.getTvList({
      success:function(tvs){
        console.log(tvs)
        that.setData({
         tvs:tvs
        })
      }
    })
    network.getShowList({
      success:function(shows){
        console.log(shows)
        that.setData({
          shows:shows
        })
      }
    })
}

更多页面

more.wxml

more.wxss

/* pages/more/more.wxss */
.container{
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  flex-direction: row;
  padding: 10rpx;
}
.iterview_block{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

more.json

{
  "usingComponents": {
    "Taps":"../../component/Taps/Taps",
    "iterview": "../../component/Iterview/Iterview"
  }
}

more.js

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

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
     var that=this;
    var type =options.type;
    this.setData({
      type:type
    })
    wx.showLoading({
      title:"正在加载中..."
    })
    var title='';
    if(type==='movie'){
      title='电影 '
      network.getMovieList({
        count:1000,
        success:function(movies){
          that.setData({
            items:movies
          })
          wx.hideLoading();
        
        }
      })
    }  else if(type==='tv'){
      title='电视剧 '
      network.getTvList({
        count:1000,
        success:function(tvs){
          that.setData({
            items:tvs
          })
          wx.hideLoading();
        }
      })

    }else{
      title='综艺 '
      network.getShowList({
        count:1000,
        success:function(shows){
          that.setData({
            items:shows
          })
          wx.hideLoading();
        }
      })
    }
    wx.setNavigationBarTitle({
      title: title,
    })
  },

详情页

detail.wxml

	{{item.title}} {{item.original_title}} ({{item.year}})
	
		
			
				

				{{item.rating.count}}人评价
			
			
				{{item.durations[0]}} {{item.genres}}
				{{item.pubdate[0]}}上映{{item.countries[0]}}
				{{item.authors}}
			
		
		
			
		
	
  
     豆瓣成员常用标签
     
       {{item}}
     
  

  
   短评({{totalComment}})
    
  
  查看更多短评

detail.wxss

/* pages/detail/detail.wxss */
.item-header{
  padding:60rpx 30rpx

}
.item-title{
  font-size: 50rpx;
}
.item-detail{
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.left-detail{
  margin-right: 20rpx;
  flex: 1;
}
.item-rate{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.right-detail{
  width: 200rpx;
  height: 300rpx;

}
.right-detail image{
  width: 100%;
  height: 100%;
}
.person{
  font-size: 28rpx;
  color: #ccc;
  margin-left: 20rpx;

}
.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;
  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;
}

detail.json

{
  "usingComponents": {
    "stars": "../../component/stars/stars",
    "onecomment": "../../component/onecomment/onecomment"

  }
}

detail.js

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

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    var type=options.type;
    var id=options.id;
    this.setData({
      type:type,
      id:id
    })
    var that=this;
    network.getItemDetail({
      id:id,
      type:type,
      success(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

短评组件

comment.wxml

  
   
   {{title}}
   {{rate}}分
  
  全部影评({{total}})
  
  
    上一页
    下一页

  

comment.wxss

/* pages/comment/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 ;
}

comment.json

{
  "usingComponents": {
    "onecomment": "../../component/onecomment/onecomment"

  }
}

comment.js

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

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

  },
  getComments:function(start){
    var that=this;
    var type=that.data.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,
      count:20,
      success:function(data){
        var total=data.total;
        var comments=data.interests;
        that.setData({
          total:total,
          comments:comments,
          start:start,
          nextLoading:false,
          preLoading:false
        })
        wx.pageScrollTo({
           scrollTop:0,
        })
      }
    })
  },
  onPrePageTap:function(){  //上一页
     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(){
    var that=this;
    var oldstart=that.data.start
    var start=oldstart+that.data.count;
    that.getComments(start)
  },
  onTap:function(){
    wx.navigateBack({
    
    })
  },

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

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

搜索页

 

search.wxml

  
    历史记录
    清除
  
  {{item.title}}


  
    
    
      {{item.title}}
      {{item.rating.value}}分/{{item.year}}
    
  

search.wxss

/* pages/search/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;
}

search.json

{
  "usingComponents": {
    "Taps": "../../component/Taps/Taps"
  }
}

search.js

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

  /**
   * 页面的初始数据
   */
  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){
        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

app.js

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    
  },
  globalUrl: {
    doubanUrl: "https://m.douban.com/rexxar/api/v2"
  
  }
})

utils工具包

封装网络接口，方便page页调用

network.js

 import{globalUrls}from "urls.js"
const network={
  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;
        params.success(item)
      }
    })
  },
  //获取电影列表
  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)
       
  },
  getSearch: function(params){
    var q = params.q;
    var url = globalUrls.searchUrl(q);
    wx.request({
      url: url,
      success: function(res){
        var subjects = res.data.subjects;
       
          params.success(subjects);
        
      }
    })
},

  getItemList:function(params){
  var count=params.count?params.count:7// 获取count数量值
  var url='';
  if(params.type==='movie'){
    url=globalUrls.movieList;

  }else if (params.type==='tv'){
    url=globalUrls.tvList;
  }else{
    url=globalUrls.showList;
  }
  wx.request({
    url: url,
    data:{
      count:count
    },
    success:function(res){
      console.log(res)
      var items=res.data.subject_collection_items
      var itemsCount=items.length;
      if(itemsCount%3===2){
        items.push(null)
      }
      if(params&¶ms.success){
        params.success(items)
      }
    }
  })
  },
  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);
    }
    wx.request({
      url: url,
      success:function(res){
        var tags=res.data.tags;
        if(params.success){
          params.success(tags);
        }else{
          console.log("获取信息失败");
        }
      }
    })
  },
  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);
        }
      }

    })
  }
  
}
export{network}

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",
  searchUrl:function(q){
    return"https://m.douban.com/rexxar/api/v2/search?q="+q

  },
  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);
  }

  


}
export{globalUrls}