微信小程序豆瓣项目Day2_微信小程序短评页面

编写接口地址

在utils工具类下创建url.js文件

定义一个方法：
const urlList = [
// 0电影列表
“https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items”,
// 1电视剧列表
“https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items”,
// 2综艺列表
“https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items”,
// 3搜索
“https://m.douban.com/rexxar/api/v2/search”,

]

接着我们再定义标签，短评等接口

const parameter = {
// 详情
itemDetail(type, id) {
return “https://m.douban.com/rexxar/api/v2/” + type + “/” + id
},
// 标签
typeTag(type, id) {
return “https://m.douban.com/rexxar/api/v2/” + type + “/” + id + “/tags?count=8”
},
// 短评
commentary(type, id) {
return “https://m.douban.com/rexxar/api/v2/”+type+"/"+id+"/interests"
}
}

并使用export 封装起来
export { urlList,parameter }

detail页面

当我们在页面点击任意一个影视数据会跳到它的详情页面

1.wxml

<!--pages/detail/detail.wxml-->
<view class="detailBox" wx:if="{{itemData}}">
  <view style="font-weight: bold;font-size:45rpx">{{itemData.title}}</view>
  <view style="display:flex">
    <view class="detailBox-l">
      <view style="display:flex">
        <star wx:if="{{itemData.rating.value != undefined}}" rate="{{itemData.rating.value}}" starSize="23" fontSize="23" fontColor="#000"></star>
        <view style="font-size: 23rpx;margin-left:10rpx;color: #A9A9A9">{{itemData.review_count}}人评价</view>
      </view>
      <view class="textBox">{{itemData.durations}} {{itemData.genres[0]}}/{{itemData.genres[1]}}</view>
      <view class="textBox">{{itemData.pubdate}}</view>
      <view class="textBox">{{itemData.card_subtitle}}</view>
    </view>
    <view class="detailBox-r">
      <image src="{{itemData.pic.large}}" mode="aspectFill"></image>
    </view>
  </view>
  <!-- 豆瓣成员常用标签 -->
  <view class="detailBox-tag">
    <view style="font-size: 26rpx;color:#A9A9A9">豆瓣成员常用标签</view>
    <view class="detailBox-tag-box" >
      <view wx:for="{{tagData}}">{{item}}</view>
    </view>
  </view>
  <!-- 短评 -->
  <view>
    <view class="detailBox-commentary">短评（{{total}}）</view>
    <userComment wx:for="{{commentaryData}}" item="{{item}}"></userComment>
    <navigator class="more-commentary" url="/pages/comment/comment?img={{itemData.pic.large}}&title={{itemData.title}}&pf={{itemData.rating.value}}&type={{type}}&id={{id}}">查看更多短评</navigator>
  </view>
</view>
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

2.css样式

/* pages/detail/detail.wxss */
.detailBox{
  width: 100vw;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}
.detailBox .detailBox-l{
  width: 384rpx;
  margin-right: 60rpx;
  line-height: 100rpx;
}
.detailBox .detailBox-l .textBox{
  font-size: 30rpx;
  line-height: 60rpx;
  /* 允许在单词内换行 */
  word-break:break-all;  
} 
.detailBox .detailBox-r image{
  width: 250rpx;
  height: 380rpx;
}
.detailBox .detailBox-tag{
  width: 100%;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
}
.detailBox .detailBox-tag .detailBox-tag-box{
  display: flex;
  flex-wrap: wrap;
}
.detailBox .detailBox-tag .detailBox-tag-box view{
  overflow: hidden;
  background-color: #F5F5F5;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  margin: 30rpx 0rpx 0 13rpx;
}
.detailBox-commentary{
  width: 90vw;
  margin: 80rpx auto 20rpx auto ;
  font-size: 26rpx;
  color:#A9A9A9
}
.more-commentary{
  width: 100vw;
  text-align: center;
  color: #43BE58;
  margin-top: 30rpx;
}
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

3.json中：

  "usingComponents": {
    "star": "/componets/star/star",
    "userComment": "/componets/userComment/userComment"
  }
1
2
3
4

4js方法中：

// pages/detail/detail.js
import { urlList,parameter } from '../../utils/url'
import { netWork } from '../../utils/net'
Page({

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

  },
  netWork(type,id){
    var that = this
    // 详情
    netWork.itemData({
      url: parameter.itemDetail(type,id),
      success(data) {
        that.setData({
          itemData: data.data
        })
      }
    })
    // 标签
    netWork.itemData({
      url: parameter.typeTag(type,id),
      success(data) {
        that.setData({
          tagData: data.data.tags
        })
      }
    })
    // 短评
    netWork.commentary({
      url: parameter.commentary(type,id),
      count: 3,
      start: 0,
      success(data) {
        that.setData({
          commentaryData: data.data.interests,
          total:data.data.total
        })  
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.netWork(options.type,options.id)
    this.setData({
      type: options.type,
      id: options.id
    })
  },

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

如图我们可以看见短评下方我们可以查看更多的短评。
点击时候我们会跳到短评界面。

短评界面。

<!--pages/comment/comment.wxml-->

<view wx:if="{{commentData}}">
  <view class="commentbox">
    <image src="{{img}}" />
    <view class="commentbox-title">{{title}}</view>
    <view style="color:#A9A9A9;font-size:28rpx;width:120rpx">{{pf}}分</view>
  </view>
  <!-- 短评 -->
  <view class="commentary-box">
    <view class="commentary">全部影评（{{total}}）</view>
    <userComment wx:for="{{commentData}}" item="{{item}}"></userComment>
    <view class="button-box">
      <button style="width:230rpx" disabled="{{isButton}}" catch:tap="pageUpClick">上一页</button>
      <button style="width:230rpx"  catch:tap="pageDownClick">下一页</button>
    </view>
  </view>

</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.css

/* pages/comment/comment.wxss */
.commentbox {
  display: flex;
  width: 90vw;
  margin: 0 auto;
  height: 10vh;
  align-items: center;
}

.commentbox image {
  width: 50rpx;
  height: 60rpx;
  margin-right: 15rpx;
}

.commentary {
  width: 90vw;
  margin: 20rpx auto 20rpx auto;
  font-size: 40rpx;
  font-weight: bold;
}

.commentary-box {
  width: 100vw;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}

.button-box {
  width: 100vw;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-evenly;
  margin: 50rpx 0;
}
.button-box button{
  background-color:	#F5F5F5;
}

.commentbox-title {
  color: #4CC05F;
  margin-right: 15rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
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

json：
{
“usingComponents”: {
“userComment”: “/componets/userComment/userComment”
}
}

js：

// pages/comment/comment.js
import { urlList, parameter } from '../../utils/url'
import { netWork } from '../../utils/net'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isButton: true,
    start: 0
  },
  // 影评数据
  commentData(type, id) {
    var that = this
    netWork.commentary({
      url: parameter.commentary(type, id),
      count: 8,
      start: 0,
      success(data) {
        that.setData({
          commentData: data.data.interests,
          total: data.data.total,
        })
      }
    })
  },
  // 上一页
  pageUpClick() {
    var that = this
    netWork.commentary({
      url: parameter.commentary(that.data.type, that.data.id),
      count: 8,
      start: that.data.start - 8,
      success(data) {
        that.setData({
          commentData: data.data.interests,
          total: data.data.total,
          start: that.data.start - 8
        })
        if (that.data.start == 0) {
          // 禁用上一页
          that.setData({
            isButton: true
          })
        } 
        wx.pageScrollTo({
          scrollTop: 0,
        })
      }
    })
  },
  // 下一页
  pageDownClick() {
    var that = this
    netWork.commentary({
      url: parameter.commentary(that.data.type, that.data.id),
      count: 8,
      start: that.data.start + 8,
      success(data) {
        that.setData({
          commentData: data.data.interests,
          total: data.data.total,
          start: that.data.start + 8,
          isButton: false
        })
        wx.pageScrollTo({
          scrollTop: 0,
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      img: options.img,
      title: options.title,
      pf: options.pf,
      type: options.type,
      id: options.id
    })
    this.commentData(options.type, options.id)
  },

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

  },

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

  },

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

  },

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

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

  },

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

  },

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

  }
})
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
123
124
125
126
127
128
129
130
131
132
133
134