微信小程序豆瓣项目Day2

最新推荐文章于 2024-05-19 16:21:27 发布

别等风

最新推荐文章于 2024-05-19 16:21:27 发布

阅读量486

点赞数

分类专栏：项目实例微信小程序文章标签： html css3

本文链接：https://blog.csdn.net/xiaobaibaiyo/article/details/109320167

版权

微信小程序同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

项目实例

20 篇文章 1 订阅

订阅专栏

编写接口地址

在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页面

当我们在页面点击任意一个影视数据会跳到它的详情页面
blog.csdnimg.cn/20201027204057434.png#pic_center)

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>

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

3.json中：

  "usingComponents": {
    "star": "/componets/star/star",
    "userComment": "/componets/userComment/userComment"
  }

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

如图我们可以看见短评下方我们可以查看更多的短评。
点击时候我们会跳到短评界面。
在这里插入图片描述

短评界面。
在这里插入图片描述

<!--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>

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

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 () {

  }
})

别等风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序豆瓣项目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/rexx
复制链接

扫一扫