豆瓣&详情页面固定样式完成&详情页短评数据获取与渲染

详情页面固定样式完成

详情页面header完成

要完成的样式
要完成的样式

  1. 创建detail页面

app.json中,将detail放在最前面方便后面调试

保存生成detail页面

  1. 分析布局

分析

  1. detail.wxml代码编写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<view class="item-header">
  <view class="item-title"> 肖申克的救赎(1994) </view>
  <view class="item-detail">
    <view class="left-detail">
      <view class="item-rate">
        <stars rate="9.7"></stars>
        <text class="comment-persons">203894评价</text>
      </view>
      <view class="item-sub-detail">
        <view class="item-type"> 142分钟 剧情 / 犯罪 </view>
        <view class="item-show"> 1994-10-14(美国) </view>
        <view class="item-actors">
          导演: 弗兰克·德拉邦特/ 主演: 蒂姆·罗宾斯
        </view>
      </view>
    </view>
    <view class="right-detail">
      <image
        src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp"
      ></image>
    </view>
  </view>
</view>

detail.wxss代码

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

效果图

效果图片

标签布局和样式完成

样式

detail.wxml代码

1
2
3
4
5
6
7
8
<view class="item-tags">
  <view class="item-tags-title">豆瓣成员常用标签</view>
  <view class="item-tags-list">
    <text>黑色幽默</text><text>小人物</text><text>戏剧</text
    ><text>方言</text><text>中国大陆</text><text>人性</text
    ><text>剧情</text>
  </view>
</view>

detail.wxss代码

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
.item-tags-title{
  /* 设置元素的下外边距 */
  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;
  columns: #353535;
  text-align: center;
  border-radius: 40rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

详情页布局完成

分析：

要完成的样式

detail.wxml

这里的头像图片和文字我们先从豆瓣网获取，方便页面布局显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<view  class="comment-list-group">
<view  class="comment-title">短评(202220297)</view>
<view  class="comment-group">
<view  class="left-comment">
<image  class="avatar" src="https://img3.doubanio.com/icon/u218767230-1.jpg"></image>
</view>
<view class="right-comment">
<view  class="username-rate">
<view  class="username">羚锐</view>
<stars  rate="5" starsize="30" istext="{{false}}" ></stars>
</view>
<view  class="release-time">2018-12-03   12:22:22</view>
<view  class="content">这部纪录片上映也等了很久，就像这段历史被揭开的时间也是等待了太久，
这几个人的人生或许仍然不能被探索清楚，但至少已经开始被发掘，其实这不仅是关于八个中国乘客，也是那一代华人移民故事，方的故事尤为震撼，
一个从冰海里挣扎出来的幸存者，又如此努力在美国讨生活还要帮助亲友，他的故事比电影更加传奇。
</view>
</view>
</view>

 <navigator class="more-comment">查看更多短评</navigator>

detail.wxss

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
.comment-list-group{
  padding: 60rpx 30rpx;
}
.comment-list-group  .comment-title{
  font-size: 32rpx;
  color: #b3b3b3;
}
/* 左边固定，右边内容适配 */
.comment-list-group  .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;
}
.more-comment{
  text-align: center;
  font-size: 36rpx;
  color: #41be57;
  margin-bottom: 60rpx;
}

问题：星星这里出现了评分数字

要完成的样式

解决：

在stars.js文件中定义一个属性，是否需要文本

1
2
3
4
istext:{
  type:Boolean,
  value:true
}

stars.wxml中
代码添加判断

detail.wxml代码

1
<stars  rate="5" starsize="30" istext="{{false}}" ></stars>

页面完成

以下是将详情页的数据转换为真实从网上获取的数据

详情页入口参数设置

  1. 分析：进入详情页面有多种途径，1从首页中电影，电视剧，综艺都可以进入，2从列表页面也可以点击进入

所以我们要对点击进入详情页面进行入口设置，因为(电影，电视剧，综艺)三个的url类型是不同的，所以获取详情页前要传递类型和item的id过去，告诉它我们传递的类型和id

  1. 接下来我们来到首页index.wxml中，发现页面是在indexmodul中，而页面是写在itemview中

之前我们只是在itemview中写了一些样式，并没有跳转的链接

itemview.js中定义类型

1
2
3
4
itemurl:{
  type:String,
  value:""
}

itemview.wxml url跳转链接

url

  1. indexmodule设置跳转页面
1
2
3
4
5

<itemview wx:for="{{items}}"  wx:key="{{item.title}}"  item="{{item}}" 

itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}"
></itemview>
  • 可以实现，但是我们还需要传递两个参数 type和id(通过查询字符串的方式?)

indexmodule.js 属性设置

1
2
3
4
type:{
  type:String,
  value:""
}

以后在使用这个组件的时候要传递一个字符串type进来，index页面中。

type

  • id 的传递—item中有一个属性id

id=

首页中点击可以获取到数据

console

  1. 列表页面实现获取list

它直接使用的就是itemview,所以我们就只需要传递url

list.js

1
2
3
4
5
var  that= this;
var  type = options.type;
that.setData({
  type:type
})

console

点击type和id都能获取

详情页item详情数据获取

详情页面参数已经可以获取了

  1. detail.js 

    1
    2
    var  type =options.type;
    var  id=options.id;

  2. 导入详情页面的三个url到url.js中

1
2
3
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/",
  1. network.js 文件中定义一个新的函数来获取网络请求

获取网络请求

最后成功获取通过success函数回调返回item

  1. detail.js中导入network
1
import  {network}  from  "../../utils/network"

获取打印数据

此时点击首页一个数据发现控制台200的状态并打印了数据，发现通过url可以获取到数据

详情页面item数据渲染

将获取到的item的数据设置到界面上

  1. detail.js中保存data数据
1
2
3
4
5
6
var that  =this;

  that.setData({
              item:item
            })
 // console.log(item)  //打印查看数据列表

控制台数据答应

  1. detail.wxml中修改

修改位置

  1. detail.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
onLoad: function (options) {
        var that  =this;
        var  type =options.type;
        var  id=options.id;

        network.getItemDetail({
          type:type,
          id:id,
          success:function(item){
            var  genres= item.genres;
           //字符串拼接  电影类型
           genres = genres.join("/");
           item.genres = genres;

           var   actors = item.actors;
           var  actorNames = [];
             //slice函数截取数组的一部分，slice(0,3)左闭右开取(0,1,2)，演员数组太多，取三个返回
           if(actors.length>3){
             actors = actors.slice(0,3);
           }
        //    for循环压入数组中
           for(var  index = 0;index<actors.length;index++){
             var  actor  = actors[index];
             actorNames.push(actor.name);
           }
           actorNames = actorNames.join("/");
           var  director  = item.directors[0].name;
           var  authors = director+"(导演)/"+actorNames;
           item.authors = authors;

            that.setData({
              item:item
            })
           // console.log(item)
          }
        });
 }

页面数据可以从网络上请求改变

标签完成

标签数据获取与数据渲染

如图

  1. url.js设置

url设置

  1. network.js函数设置

network.js

  1. detail.js中触发该函数

tags用来接收调用network.js中函数返回传的参数

detail.js

  1. 修改detail.wxml代码

wx:for循环中，默认的下标名称的index,默认的值的名称的item

wx:for

详情页短评数据获取与渲染

  1. url链接获取

url.js代码

1
2
3
4
5
6
7
8
9
10
11
// 默认传一个start=0,count =3
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);
},

  1. network.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
// 获取短评
  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);
        }
      }
    })
  }
  1. detail页面调用 detail.js文件种
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//  获取评论
network.getItemComments({
  type:type,
  id:id,
  success:function(data){
    var  totalComment = data.total;
    var  comments= data.interests;
    that.setData({
      totalComment:totalComment,
      comments:comments
    })
    // console.log(data)
  }
})

  1. 控制台能够打印200状态，并获取到data

  2. 数据渲染到detail.wxml种

变量修改

wxml代码修改

  1. 页面效果

真实数据