欢迎光临
我们一直在努力
当前位置：九八云安全 行业资讯 正文

九八云百度小程序教程：page-video 短视频详情页模板

2024-06-14 分类：行业资讯 阅读(29) 评论(0)
  • page-video 短视频详情页模板
    • 示例
    • 页面内容
      • 短视频详情页
      • 评论详情页
    • 字段说明
      • 返回示例说明
      • longVideoInfo 长视频信息说明
      • playVideoList 连播列表说明
      • operateInfo 运营位信息说明
    • npm 依赖
    • Bug & Tip

    page-video 短视频详情页模板

    从开发者工具 v2.25.1-rc 版本、基础库版本 3.190.1 版本开始支持。

    解释：本模版适用于快速搭建视频片花、预告、短视频等视频类详情页。模版在保证用户交互体验的基础上，提供了不同模块，配合使用加入书架、预约和引导关注组件，实现兴趣激发，充分发挥短视频带长视频消费的种草价值，拉动二次重访。

    示例

    扫码体验

    代码示例

    请使用百度APP扫码

    页面内容

    模板包含两个页面：短视频详情页、评论详情页。

    短视频详情页

    默认配置为导航栏、视频播放器、短视频标题及辅助信息区、长视频信息区一站式互动区等模块。

    包含导航栏、引导关注组件、视频播放器（含自动连播逻辑）、短视频标题及辅助信息区、长视频信息区、活动运营位、百青藤广告区、推荐短视频区和一站式互动区等模块，分为默认配置模块和可选配置模块。开发者可根据自身业务形态选择合适的模块进行自定义配置。

    页面路径：pages/index

    代码示例

    • 获取页面数据。可将 getIndexData 替换以发送网络请求获取真实数据。

    • JS

    
 
      

  
    1. Page({
      2. 

  
    2.  ...
      3. 

  
    3.  attr: {
      4. 

  
    4.  // 请求的 url，请替换为真实的请求地址，该值仅做为示例，值为 defaultData 为默认配置示例，其他值为全配置示例
      5. 

  
    5.  url: '/index',
      6. 

  
    6.  // onLoad参数
      7. 

  
    7.  options: {}
      8. 

  
    8.  },
      9. 

  
    9.  onLoad(options) {
      10. 

  
    10.  this.getPageData();
      11. 

  
    11.  ...
      12. 

  
    12.  },
      13. 

  
    13.  getPageData() {
      14. 

  
    14.  const url = this.attr.url;
      15. 

  
      16. 

  
    16.  // 模拟请求，请进行替换
      17. 

  
    17.  getIndexData({
      18. 

  
    18.  url
      19. 

  
    19.  }).then(
      20. 

  
    20.  res => {
      21. 

  
    21.  res.playVideoList.forEach(item => {
      22. 

  
    22.  // 格式化播放数量
      23. 

  
    23.  item.playNum = this.formatPlayNum(item.playNum);
      24. 

  
    24.  item.nextInfo = false;
      25. 

  
    25.  // 过滤出长视频
      26. 

  
    26.  if (item.type === 1) {
      27. 

  
    27.  this.attr.feedList.push(item);
      28. 

  
    28.  }
      29. 

  
    29.  });
      30. 

  
    30.  let {
      31. 

  
    31.  showFeed,
      32. 

  
    32.  feedMore,
      33. 

  
    33.  feedShowList,
      34. 

  
    34.  toolbarConfig
      35. 

  
    35.  } = this.data;
      36. 

  
      37. 

  
    37.  let feedList = this.attr.feedList;
      38. 

  
      39. 

  
    39.  if (!feedList.length) {
      40. 

  
    40.  showFeed = false;
      41. 

  
    41.  }
      42. 

  
      43. 

  
    43.  // feed 少于5条不展示查看更多
      44. 

  
    44.  if (feedList.length <= 5) {
      45. 

  
    45.  feedMore = false;
      46. 

  
    46.  feedShowList = feedList;
      47. 

  
    47.  } else {
      48. 

  
    48.  // 多于5条时，先展示前5条
      49. 

  
    49.  feedShowList = feedList.slice(0, 5);
      50. 

  
    50.  }
      51. 

  
      52. 

  
    52.  toolbarConfig.title = res.longVideoInfo.name;
      53. 

  
    53.  res.longVideoInfo = this.formatVideoInfo(res.longVideoInfo);
      54. 

  
    54.  this.setData({
      55. 

  
    55.  playVideoList: res.playVideoList,
      56. 

  
    56.  feedShowList: feedShowList,
      57. 

  
    57.  longVideoInfo: res.longVideoInfo,
      58. 

  
    58.  operateInfo: res.operateInfo,
      59. 

  
    59.  feedMore: feedMore,
      60. 

  
    60.  toolbarConfig: toolbarConfig,
      61. 

  
    61.  showFeed: showFeed,
      62. 

  
    62.  commentParam: {
      63. 

  
    63.  // 文章的唯一标识
      64. 

  
    64.  snid: this.attr.options.snid,
      65. 

  
    65.  path: `/@smt-ui-template-page-video/pages/index/index?snid=${this.attr.options.snid}`,
      66. 

  
    66.  title: res.longVideoInfo.name
      67. 

  
    67.  },
      68. 

  
    68.  loading: false,
      69. 

  
    69.  // code 0: 正常获取数据 99999: 无网络 其他: 服务异常
      70. 

  
    70.  statusType: res.code === 99999 ? 'noNetwork' : res.code !== 0 ? 'warning' : ''
      71. 

  
    71.  });
      72. 

  
    72.  }
      73. 

  
    73.  );
      74. 

  
    74.  }
      75. 

  
    75. })
      76.

    • 引导关注组件。进入页面时，可选择是否展示引导关注组件。

    • JS

    
 
      

  
    1. Page({
      2. 

  
    2.  ...
      3. 

  
    3.  attr: {
      4. 

  
    4.  // 页面展示时是否显示关注引导tip
      5. 

  
    5.  showFavorite: true
      6. 

  
    6.  },
      7. 

  
    7.  onShow() {
      8. 

  
    8.  if (this.attr.showFavorite) {
      9. 

  
    9.  // 页面展示时显示关注引导
      10. 

  
    10.  this.showFavoriteGuide();
      11. 

  
    11.  }
      12. 

  
    12.  }
      13. 

  
    13. })
      14.
    • 视频播放器，支持自动连播。
      自动连播逻辑：
      • 触发时机：视频即将播放完毕，进入 5s 倒计时并展示提示气泡， 若页面处于最上方倒计时结束后自动连播下一条短视频。否则阻断连播，展示蒙层。
      • 自动连播顺序：根据 playVideoList 进行去重后的顺序进行播放，推荐开发者将长视频放在 playVideoList 的最后。
    1. 当前用户退出小程序后，即删除已观看记录，下次进入小程序短视频落地页，重新执行去重逻辑。
    2. 蒙层展示下一条播放的视频信息并提供重播、观看正片、立即播放等功能。
    • SWAN
    • JS
    
 
      

  
    1.  <!-- 视频组件-->
      2. 

  
    2.  <video
      3. 

  
    3.  id="myVideo"
      4. 

  
    4.  class="video-header-player"
      5. 

  
    5.  src="{{playVideoList[playIndex] && playVideoList[playIndex].src}}"
      6. 

  
    6.  title="{{playVideoList[playIndex].title}}"
      7. 

  
    7.  autoplay="true"
      8. 

  
    8.  objectFit="fill"
      9. 

  
    9.  direction="true"
      10. 

  
    10.  muted="true"
      11. 

  
    11.  show-mute-btn="true"
      12. 

  
    12.  show-center-play-btn="false"
      13. 

  
    13.  bindtimeupdate="videoTimeUpdateHandler"
      14. 

  
    14.  bindplay="videoPlayHandler"
      15. 

  
    15.  bindended="videoEndedHandler"
      16. 

  
    16.  >
      17. 

  
    17.  </video>
      18. 

  
      19. 

  
    19.  <!-- 蒙层 -->
      20. 

  
    20.  <view class="video-header-cover" s-if="{{!isPlaying && nextIndex != playIndex}}">
      21. 

  
    21.  <view class="video-header-cover-title" s-if="{{!timer}}">接下来播放</view>
      22. 

  
    22.  <view class="video-header-cover-title" s-else><view class="video-header-cover-title-remaining">{{remainingTime}}s</view>后播放</view>
      23. 

  
    23.  <view class="video-header-cover-content">
      24. 

  
    24.  <image class="video-header-cover-content-left" src="{{playVideoList[nextIndex].poster}}" mode="scaleToFill"></image>
      25. 

  
    25.  <view class="video-header-cover-content-right">
      26. 

  
    26.  <view class="video-header-cover-content-right-text c-line-clamp2">{{playVideoList[nextIndex].title}}</view>
      27. 

  
    27.  <view class="video-header-cover-content-right-num">{{playVideoList[nextIndex].playNum}}次播放</view>
      28. 

  
    28.  <view class="video-header-cover-content-right-button" bindtap="playVideo">立即播放</view>
      29. 

  
    29.  </view>
      30. 

  
    30.  </view>
      31. 

  
    31.  <view class="video-header-cover-buttons">
      32. 

  
    32.  <view class="video-header-cover-buttons-item" bindtap="replayVideo">
      33. 

  
    33.  <image class="video-header-cover-buttons-item-img" src="../../common/images/replay.png" mode="aspectFit"></image>
      34. 

  
    34.  重播
      35. 

  
    35.  </view>
      36. 

  
    36.  <view class="video-header-cover-buttons-item" bindtap="navigateTo" data-path="{{longVideoInfo.path}}">
      37. 

  
    37.  <image class="video-header-cover-buttons-item-img" src="../../common/images/play.png" mode="aspectFit"></image>
      38. 

  
    38.  观看正片
      39. 

  
    39.  </view>
      40. 

  
    40.  </view>
      41. 

  
    41.  </view>
      42. 

  
      43. 

  
    43.  <view class="video-header-cover replay" s-if="{{!isPlaying && nextIndex == playIndex}}" bindtap="replayVideo">
      44. 

  
    44.  <view class="video-header-cover-replay">
      45. 

  
    45.  <image class="video-header-cover-replay-icon" src="../../common/images/replay.png" mode="scaleToFill"></image>
      46. 

  
    46.  </view>
      47. 

  
    47.  重播
      48. 

  
    48.  <
      49. 

  
    49.  <!-- 下一条视频提示 -->
      50. 

  
    50.  <view class="video-header-tips c-line-clamp1" s-if="{{isMonitoring && isPlaying}}">即将播放：{{playVideoList[nextIndex].title}}</view>
      51. 

 
    
 
      

  
    1. Page({
      2. 

  
    2.  ...
      3. 

  
    3.  /**
      4. 

  
    4.  * 播放下一条视频
      5. 

  
    5.  */
      6. 

  
    6.  playVideo() {
      7. 

  
    7.  this.setData({
      8. 

  
    8.  isMonitoring: false,
      9. 

  
    9.  isPlaying: true,
      10. 

  
    10.  playIndex: this.data.nextIndex
      11. 

  
    11.  });
      12. 

  
    12.  },
      13. 

  
      14. 

  
    14.  /**
      15. 

  
    15.  * 重播
      16. 

  
    16.  */
      17. 

  
    17.  replayVideo() {
      18. 

  
    18.  this.attr.videoContext.play();
      19. 

  
    19.  this.setData({
      20. 

  
    20.  isMonitoring: false,
      21. 

  
    21.  isPlaying: true
      22. 

  
    22.  });
      23. 

  
    23.  },
      24. 

  
      25. 

  
    25.  /**
      26. 

  
    26.  * 监听播放开始事件
      27. 

  
    27.  */
      28. 

  
    28.  videoPlayHandler() {
      29. 

  
    29.  const {
      30. 

  
    30.  timer,
      31. 

  
    31.  playVideoList,
      32. 

  
    32.  playIndex
      33. 

  
    33.  } = this.data;
      34. 

  
      35. 

  
    35.  // 开始播放清除倒计时器
      36. 

  
    36.  if (timer) {
      37. 

  
    37.  clearInterval(timer);
      38. 

  
    38.  this.setData({
      39. 

  
    39.  timer: null
      40. 

  
    40.  });
      41. 

  
    41.  }
      42. 

  
      43. 

  
    43.  if (!playVideoList[playIndex].nextInfo) {
      44. 

  
    44.  playVideoList[playIndex].nextInfo = true;
      45. 

  
      46. 

  
    46.  // 根据已播列表获取下一条视频 index
      47. 

  
    47.  for (let i = playIndex + 1; i < playVideoList.length; i++) {
      48. 

  
    48.  if (this.attr.playedList.indexOf(playVideoList[i].id) === -1) {
      49. 

  
    49.  this.setData({
      50. 

  
    50.  nextIndex: i
      51. 

  
    51.  });
      52. 

  
    52.  break;
      53. 

  
    53.  }
      54. 

  
    54.  }
      55. 

  
    55.  }
      56. 

  
    56.  this.setData({
      57. 

  
    57.  isMonitoring: false
      58. 

  
    58.  });
      59. 

  
    59.  },
      60. 

  
      61. 

  
    61.  /**
      62. 

  
    62.  * 监听播放结束事件
      63. 

  
    63.  */
      64. 

  
    64.  videoEndedHandler() {
      65. 

  
    65.  // 短视频去重
      66. 

  
    66.  if (this.data.playVideoList[this.data.playIndex].type === 1) {
      67. 

  
    67.  this.attr.playedList.push(this.data.playVideoList[this.data.playIndex].id);
      68. 

  
    68.  }
      69. 

  
      70. 

  
    70.  // 没有可播放的视频
      71. 

  
    71.  if (this.data.nextIndex === this.data.playIndex) {
      72. 

  
    72.  // 存在长视频落地页时跳转长视频落地页
      73. 

  
    73.  if (this.data.longVideoInfo.path) {
      74. 

  
    74.  swan.navigateTo({
      75. 

  
    75.  url: this.data.longVideoInfo.path
      76. 

  
    76.  });
      77. 

  
    77.  } else {
      78. 

  
    78.  // 显示重播按钮
      79. 

  
    79.  this.setData({
      80. 

  
    80.  playIndex: this.data.nextIndex,
      81. 

  
    81.  isPlaying: false
      82. 

  
    82.  });
      83. 

  
    83.  this.attr.videoContext.stop();
      84. 

  
    84.  return;
      85. 

  
    85.  }
      86. 

  
    86.  }
      87. 

  
      88. 

  
    88.  // 播下一条视频时页面不在顶部
      89. 

  
    89.  if (this.attr.scrollTop !== 0) {
      90. 

  
    90.  // 取消自动连播
      91. 

  
    91.  this.attr.videoContext.stop();
      92. 

  
    92.  this.setData({
      93. 

  
    93.  isPlaying: false
      94. 

  
    94.  });
      95. 

  
    95.  // 开启计时器
      96. 

  
    96.  this.onTimer();
      97. 

  
    97.  } else {
      98. 

  
    98.  // 不被打断则直接播放下一条视频
      99. 

  
    99.  this.setData({
      100. 

  
    100.  playIndex: this.data.nextIndex
      101. 

  
    101.  });
      102. 

  
    102.  }
      103. 

  
    103.  },
      104. 

  
      105. 

  
    105.  /**
      106. 

  
    106.  * 监听播放进度变化
      107. 

  
    107.  * @param {*} e 事件对象
      108. 

  
    108.  */
      109. 

  
    109.  videoTimeUpdateHandler(e) {
      110. 

  
    110.  if (this.data.nextIndex === this.data.playIndex) {
      111. 

  
    111.  return;
      112. 

  
    112.  }
      113. 

  
      114. 

  
    114.  const {
      115. 

  
    115.  duration,
      116. 

  
    116.  currentTime
      117. 

  
    117.  } = e.detail;
      118. 

  
      119. 

  
    119.  // 剩余5s 时进行自动播放提示
      120. 

  
    120.  if (duration !== 0 && currentTime !== 0 && duration - currentTime <= 5) {
      121. 

  
    121.  this.setData({
      122. 

  
    122.  isMonitoring: true
      123. 

  
    123.  });
      124. 

  
    124.  }
      125. 

  
    125.  }
      126. 

  
    126. })
      127.

    • 短视频标题及辅助信息区。展示用户头像、昵称、播放次数、简介。可展开收起，默认为收起态。

    • SWAN

    • JS
    
 
      

  
    1. <!-- 短视频标题及辅助信息区 -->
      2. 

  
    2. <view class="video-content-introduction">
      3. 

  
    3.  <view class="video-content-introduction-title">
      4. 

  
    4.  {{playVideoList[playIndex].title}}
      5. 

  
    5.  <image
      6. 

  
    6.  s-if="{{playVideoList[playIndex].time || playVideoList[playIndex].introduction}}"
      7. 

  
    7.  class="video-content-introduction-title-switch {{introSwitch ? 'off': '' }}"
      8. 

  
    8.  mode="scaleToFill"
      9. 

  
    9.  src="../../common/images/arrow.png" bindtap="introductionSwitch">
      10. 

  
    10.  </image>
      11. 

  
    11.  </view>
      12. 

  
    12.  <view class="video-content-introduction-other">
      13. 

  
    13.  <view class="video-content-introduction-other-num">{{playVideoList[playIndex].playNum}}次播放</view>
      14. 

  
    14.  <image class="video-content-introduction-other-img video-img" mode="scaleToFill"
      15. 

  
    15.  s-if="{{playVideoList[playIndex].authorImage}}" src="{{playVideoList[nextIndex].autorImage}}"></image>
      16. 

  
    16.  <view class="video-content-introduction-other-name c-line-clamp1">{{playVideoList[playIndex].authorName}}</view>
      17. 

  
    17.  </view>
      18. 

  
    18.  <view class="video-content-introduction-more"
      19. 

  
    19.  s-if="{{introSwitch && (playVideoList[playIndex].time || playVideoList[playIndex].introduction)}}">
      20. 

  
    20.  <view class="video-content-introduction-more-time" s-if="{{playVideoList[playIndex].time}}">
      21. 

  
    21.  发布时间：{{playVideoList[playIndex].time}}
      22. 

  
    22.  </view>
      23. 

  
    23.  <view class="video-content-introduction-more-text c-line-clamp3"
      24. 

  
    24.  s-if="{{playVideoList[playIndex].introduction}}">{{playVideoList[playIndex].introduction}}
      25. 

  
    25.  </view>
      26. 

  
    26.  </view>
      27. 

  
    27. </view>
      28. 

 
    
 
      

  
    1. Page({
      2. 

  
    2.  ...
      3. 

  
    3.  /**
      4. 

  
    4.  * 展开、收起简介信息
      5. 

  
    5.  */
      6. 

  
    6.  introductionSwitch() {
      7. 

  
    7.  this.setData({
      8. 

  
    8.  introSwitch: !this.data.introSwitch
      9. 

  
    9.  });
      10. 

  
    10.  }
      11. 

  
    11. })
      12.

    • 长视频信息区。当资源配置了落地页时，展示加入书架按钮和观看正片按钮，点击长视频封面和观看正片按钮可跳转至长视频落地页。当资源未配置落地页时（资源未上映），默认仅展示预约观看按钮。加入书架功能具体接入流程参考书架同步功能介绍，支持将资源同步至百度 App -书架；预约功能具体接入流程参考预约订阅组件（平台配置版）和预约订阅组件（API版）。

    • SWAN

    
 
      

  
    1. <!-- 长视频信息区 -->
      2. 

  
    2. <view class="video-content-detail">
      3. 

  
    3.  <view class="video-content-detail-left" bindtap="navigateTo" data-path="{{longVideoInfo.path}}">
      4. 

  
    4.  <image class="video-content-detail-left-img video-img" src="{{longVideoInfo.poster}}" mode="scaleToFill">
      5. 

  
    5.  </image>
      6. 

  
    6.  <view class="video-content-detail-left-play">
      7. 

  
    7.  </view>
      8. 

  
    8.  <image class="video-content-detail-left-play-icon" src="../../common/images/play3.png" mode="scaleToFill">
      9. 

  
    9.  </image>
      10. 

  
    10.  </view>
      11. 

  
    11.  <view class="video-content-detail-right">
      12. 

  
    12.  <view class="video-content-detail-right-name">
      13. 

  
    13.  {{longVideoInfo.name}}
      14. 

  
    14.  </view>
      15. 

  
    15.  <view class="video-content-detail-right-tags c-line-clamp2">
      16. 

  
    16.  {{longVideoInfo.info}}
      17. 

  
    17.  </view>
      18. 

  
    18.  <view class="video-content-detail-right-buttons">
      19. 

  
    19.  <!-- 立即观看按钮 -->
      20. 

  
    20.  <view class="video-content-detail-right-buttons-primary" s-if="{{longVideoInfo.path}}" bindtap="navigateTo"
      21. 

  
    21.  data-path="{{longVideoInfo.path}}">观看正片</view>
      22. 

  
    22.  <!-- 加入书架按钮 -->
      23. 

  
    23.  <view class="video-content-detail-right-buttons-normal" bindtap="insertBookshelf"
      24. 

  
    24.  s-if="{{longVideoInfo.path || longVideoInfo.bookInfo}}">加入书架</view>
      25. 

  
    25.  <!-- 预约观看按钮 -->
      26. 

  
    26.  <form s-if="{{!longVideoInfo.path || longVideoInfo.subscribeId}}" report-submit="true"
      27. 

  
    27.  report-type="subscribe" template-id="BD2305" subscribe-id="1235" bindsubmit="formSubmit">
      28. 

  
    28.  <button class="video-content-detail-right-buttons-normal" formType="submit" type="primary">预约观看</button>
      29. 

  
    29.  </form>
      30. 

  
    30.  </view>
      31. 

  
    31.  </view>
      32. 

  
    32. </view>
      33.

    • 活动运营位。开发者提供活动运营图片和跳转地址，支持跳转到当前小程序内的其他页面。例如：可配置新用户购买会员优惠活动。

    • SWAN

    
 
      

  
    1. <!-- 运营位 -->
      2. 

  
    2. <view class="video-content-operational video-img" s-if="{{operateInfo.path}}" style="background-image: url({{operateInfo.img}});" bindtap="navigateTo" data-path="{{operateInfo.path}}">
      3. 

  
    3. </view>
      4.

    • 百青藤广告区。具体接入流程参考 ad 广告组件。获取 ad 组件代码后可替换模板中的 ad 组件。

    • SWAN

    
 
      

  
    1. <!-- 广告位 若使用可取消注释-->
      2. 

  
    2. <!-- <view class="video-ad">
      3. 

  
    3.  <view class="video-ad-container">
      4. 

  
    4.  <ad appid="f71feede"
      5. 

  
    5.  apid="7182325"
      6. 

  
    6.  type="feed"
      7. 

  
    7.  >
      8. 

  
    8.  </ad>
      9. 

  
    9.  </view>
      10. 

  
    10.  <view class="video-divider wrapper" s-if="{{!showFeed}}"></view>
      11. 

  
    11. </view> -->
      12.

    • 推荐短视频区。展示播放列表的短视频。默认最多展示 5 条短视频，超过数量的短视频将被折叠，点击查看更多每次可再展开 10 条短视频，包含视频的标题、播放次数、封面、时长等，点击后跳转到短视频落地页。

    • SWAN

    • JS
    
 
      

  
    1. <!-- 短视频列表 -->
      2. 

  
    2. <view s-for="item in feedShowList" class="video-feed-item" bindtap="navigateTo" data-path="{{item.path}}">
      3. 

  
    3.  <view class="video-feed-item-left">
      4. 

  
    4.  <view class="video-feed-item-left-title c-line-clamp2">
      5. 

  
    5.  {{item.title}}
      6. 

  
    6.  </view>
      7. 

  
    7.  <view class="video-feed-item-left-num">
      8. 

  
    8.  {{item.playNum}}次播放
      9. 

  
    9.  </view>
      10. 

  
    10.  </view>
      11. 

  
    11.  <view class="video-feed-item-right">
      12. 

  
    12.  <image class="video-feed-item-right-img video-img" src="{{item.poster}}" mode="scaleToFill"></image>
      13. 

  
    13.  <view class="video-feed-item-right-time">
      14. 

  
    14.  <image class="video-feed-item-right-time-icon" src="../../common/images/play2.png" mode="scaleToFill">
      15. 

  
    15.  </image>
      16. 

  
    16.  {{item.duration}}
      17. 

  
    17.  </view>
      18. 

  
    18.  </view>
      19. 

  
    19. </view>
      20. 

  
    20. <view class="video-feed-more" bindtap="feedMoerHandler">
      21. 

  
    21.  <view>
      22. 

  
    22.  {{feedMore ? '查看更多': '没有更多了'}}
      23. 

  
    23.  <image class="video-feed-more-icon" s-if="{{feedMore}}" src="../../common/images/arrow.png" mode="scaleToFill"></image>
      24. 

  
    24.  </view>
      25. 

  
    25. </view>
      26. 

 
    
 
      

  
    1. Page({
      2. 

  
    2.  ...
      3. 

  
    3.  /**
      4. 

  
    4.  * 查看更多短视频
      5. 

  
    5.  */
      6. 

  
    6.  feedMoerHandler() {
      7. 

  
    7.  let {
      8. 

  
    8.  feedMore,
      9. 

  
    9.  feedShowList
      10. 

  
    10.  } = this.data;
      11. 

  
    11.  const start = feedShowList.length;
      12. 

  
    12.  let end = start + 10;
      13. 

  
    13.  // 结束位超出，展示剩余的视频
      14. 

  
    14.  if (end > this.attr.feedList.length) {
      15. 

  
    15.  end = start + this.attr.feedList.length - feedShowList.length;
      16. 

  
    16.  feedMore = false;
      17. 

  
    17.  }
      18. 

  
      19. 

  
    19.  feedShowList.push(...this.attr.feedList.slice(start, end));
      20. 

  
    20.  this.setData({
      21. 

  
    21.  feedShowList: feedShowList,
      22. 

  
    22.  feedMore: feedMore
      23. 

  
    23.  });
      24. 

  
    24.  }
      25. 

  
    25. })
      26.
    • 互动区。使用一站式互动组件。
    1. 使用点赞、评论功能时需要进行登入。
    2. 从其他页面跳转到本模板时，snid 文章 id 需要在加在跳转到本页面的路径上，跳转本页面的路径如：@smt-ui-template-page-video/pages/index/index?snid=10070000311753961
    • SWAN
    • JS
    
 
      

  
    1. <!-- 评论列表组件 -->
      2. 

  
    2. <comment-list
      3. 

  
    3.  class="video-comment"
      4. 

  
    4.  is-page-scroll="false"
      5. 

  
    5.  comment-param="{{commentParam}}"
      6. 

  
    6.  detail-path="{{detailPath}}"
      7. 

  
    7.  toolbar-config="{{toolbarConfig}}">
      8. 

  
    8. </comment-list>
      9. 

 
    
 
      

  
    1. Page({
      2. 

  
    2.  data: {
      3. 

  
    3.  ...
      4. 

  
    4.  // 评论参数
      5. 

  
    5.  commentParam: {},
      6. 

  
    6.  // 评论详情页面路径
      7. 

  
    7.  detailPath: '/@smt-ui-template-page-video/pages/comment-detail/index',
      8. 

  
    8.  },
      9. 

  
    9.  onLoad(options) {
      10. 

  
    10.  this.getPageData();
      11. 

  
    11.  // 获取文章 id，示例中 mock 数据，使用时请使用真实数据
      12. 

  
    12.  if (!options.snid) {
      13. 

  
    13.  options.snid = '10070000311753961';
      14. 

  
    14.  }
      15. 

  
      16. 

  
    16.  this.attr.options = options;
      17. 

  
      18. 

  
    18.  },
      19. 

  
    19.  onReady() {
      20. 

  
    20.  requireDynamicLib('myDynamicLib').listenEvent();
      21. 

  
    21.  },
      22. 

  
    22.  getPageData() {
      23. 

  
    23.  ...
      24. 

  
    24.  this.setData({
      25. 

  
    25.  ...
      26. 

  
    26.  commentParam: {
      27. 

  
    27.  // 文章的唯一标识
      28. 

  
    28.  snid: this.attr.options.snid,
      29. 

  
    29.  path: `/@smt-ui-template-page-video/pages/index/index?snid=${this.attr.options.snid}`,
      30. 

  
    30.  title: res.longVideoInfo.name
      31. 

  
    31.  }
      32. 

  
    32.  });
      33. 

  
    33.  }
      34. 

  
    34. })
      35.

    评论详情页

    展示评论详情。

    页面路径：pages/comment-detail

    • SWAN
    • JSON
    • JS
    
 
      

  
    1. <comment-detail
      2. 

  
    2.  comment-param="{{commentParam}}"
      3. 

  
    3.  srid="{{srid}}">
      4. 

  
    4. </comment-detail>
      5. 

 
    
 
      

  
    1. {
      2. 

  
    2.  "navigationBarTitleText": "评论详情",
      3. 

  
    3.  "usingSwanComponents": {
      4. 

  
    4.  "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
      5. 

  
    5.  }
      6. 

  
    6. }
      7. 

 
    
 
      

  
    1. import {
      2. 

  
    2.  login
      3. 

  
    3. } from '../../utils';
      4. 

  
      5. 

  
    5. Page({
      6. 

  
      7. 

  
    7.  data: {
      8. 

  
    8.  srid: '',
      9. 

  
    9.  commentParam: {}
      10. 

  
    10.  },
      11. 

  
    11.  onLoad(options) {
      12. 

  
    12.  if (options.srid) {
      13. 

  
    13.  this.setData({
      14. 

  
    14.  srid: options.srid
      15. 

  
    15.  });
      16. 

  
    16.  }
      17. 

  
      18. 

  
    18.  const param = getApp().globalData.commentParam;
      19. 

  
      20. 

  
    20.  if (param && Object.keys(param).length) {
      21. 

  
    21.  this.setData({
      22. 

  
    22.  'commentParam': param
      23. 

  
    23.  });
      24. 

  
    24.  } else {
      25. 

  
    25.  this.setData({
      26. 

  
    26.  commentParam: {
      27. 

  
    27.  snid: '10070000311753961',
      28. 

  
    28.  path: '/pages/comment/index?snid=10070000311753961',
      29. 

  
    29.  title: '测试文章标题'
      30. 

  
    30.  }
      31. 

  
    31.  });
      32. 

  
    32.  }
      33. 

  
    33.  },
      34. 

  
    34. });
      35.

    字段说明

    对模板使用到的字段进行说明，此部分的数据在使用模板时需从 server 获取。模板作为示例进行了 mock ，开发者可参考数据格式进行开发。

    返回示例说明

    字段名 类型 说明
    code Number 接口信息。code 0：正常获取数据；99999：无网络；其他：服务异常
    longVideoInfo Object 长视频信息，对应模板长视频信息区部分
    playVideoList Array 连播列表，对应视频播放区、短视频标题及辅助信息区和短视频列表区部分
    operateInfo Object 运营位信息，对应模板运营位部分
    • JSON
    
 
      

  
    1. { 
      2. 

  
    2.  // 接口信息
      3. 

  
    3.  code: 0, 
      4. 

  
    4.  // 长视频信息
      5. 

  
    5.  longVideoInfo: { 
      6. 

  
    6.  // 长视频封面图
      7. 

  
    7.  poster: '../../common/images/poster1.png', 
      8. 

  
    8.  // 长视频名称
      9. 

  
    9.  name: '延禧攻略', 
      10. 

  
    10.  // 长视频详情页路径，已完结、更新中的资源必须填写
      11. 

  
    11.  path: '/longVideo', 
      12. 

  
    12.  // 资源类型，如：电视剧、电影、综艺、动漫等
      13. 

  
    13.  type: '电视剧', 
      14. 

  
    14.  // 发行时间
      15. 

  
    15.  year: '2018年', 
      16. 

  
    16.  // 发行地区
      17. 

  
    17.  area: '内地', 
      18. 

  
    18.  // 资源标签，建议1-3个
      19. 

  
    19.  tags: '剧情爱情古装',
      20. 

  
    20.  // 更新状态，如共X集、更新⾄X集、即将上映、已上映、更新至X期
      21. 

  
    21.  update: '共52集', 
      22. 

  
    22.  // 单集片长，电视剧/综艺等可直接填写单集⽚⻓X分钟，电影可填写⽚⻓X分钟
      23. 

  
    23.  time: '单集片长45分钟' 
      24. 

  
    24.  },
      25. 

  
    25.  playVideoList: [
      26. 

  
    26.  { 
      27. 

  
    27.  // 连播列表
      28. 

  
    28.  // 视频 id
      29. 

  
    29.  id: 1, 
      30. 

  
    30.  // 视频地址
      31. 

  
    31.  src: 'https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4', 
      32. 

  
    32.  // 视频封面
      33. 

  
    33.  poster: '../../common/images/poster2.png', 
      34. 

  
    34.  // 视频标题
      35. 

  
    35.  title: '聂远年轻照片跟现在几乎是判若两人终于明白为什么现在才火了聂远年轻照片跟现在几乎是判若两人终于明白为什么现在才火了聂远年轻照片跟现在几乎是判若两人终于明白为什么现在才火了', 
      36. 

  
    36.  // 视频播放次数
      37. 

  
    37.  playNum: 6334000, 
      38. 

  
    38.  // 视频作者
      39. 

  
    39.  authorName: '我是作者1', 
      40. 

  
    40.  // 视频作者头像
      41. 

  
    41.  authorImage: '../../common/images/author.png', 
      42. 

  
    42.  // 视频时长
      43. 

  
    43.  duration: '03:20', 
      44. 

  
    44.  // 视频上传时间
      45. 

  
    45.  time: '2020年3月10日', 
      46. 

  
    46.  // 视频简介
      47. 

  
    47.  introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这', 
      48. 

  
    48.  // 视频类型，短视频为 1、长视频为2
      49. 

  
    49.  type: 1, 
      50. 

  
    50.  path: '/dasda'
      51. 

  
    51.  }, 
      52. 

  
    52.  {
      53. 

  
    53.  id: 2,
      54. 

  
    54.  src: 'https://b.bdstatic.com/miniapp/development_tool/2020-6/1591258607615/a332aa39e1ff.mp4',
      55. 

  
    55.  poster: '../../common/images/poster3.png',
      56. 

  
    56.  title: '贺涵强势向子君表白，子君无所君无所适从',
      57. 

  
    57.  playNum: 110011000001,
      58. 

  
    58.  authorName: '2我是作者as大大说大厦的撒旦的撒',
      59. 

  
    59.  authorImage: '../../common/images/author2.png',
      60. 

  
    60.  duration: '103:20',
      61. 

  
    61.  time: '2020年3月10日',
      62. 

  
    62.  introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这',
      63. 

  
    63.  type: 1,
      64. 

  
    64.  path: '/dasda'
      65. 

  
    65.  }, 
      66. 

  
    66.  {
      67. 

  
    67.  id: 3,
      68. 

  
    68.  src: 'https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4',
      69. 

  
    69.  poster: '../../common/images/poster2.png',
      70. 

  
    70.  title: '《前半生》大结局，贺涵离职和子君远走，唐晶不原谅',
      71. 

  
    71.  playNum: 1000000,
      72. 

  
    72.  authorName: '我是作者',
      73. 

  
    73.  authorImage: '../../common/images/author3.png',
      74. 

  
    74.  duration: '03:20',
      75. 

  
    75.  time: '2020年3月10日',
      76. 

  
    76.  introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这',
      77. 

  
    77.  type: 1,
      78. 

  
    78.  path: '/dasda'
      79. 

  
    79.  },
      80. 

  
    80.  {
      81. 

  
    81.  id: 4,
      82. 

  
    82.  src: 'https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4',
      83. 

  
    83.  poster: '../../common/images/poster3.png',
      84. 

  
    84.  title: '4聂远年轻照片跟现在',
      85. 

  
    85.  playNum: 6334000,
      86. 

  
    86.  authorName: '我是作者',
      87. 

  
    87.  authorImage: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
      88. 

  
    88.  duration: '03:20',
      89. 

  
    89.  time: '2020年3月10日',
      90. 

  
    90.  introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这',
      91. 

  
    91.  type: 2,
      92. 

  
    92.  path: '/dasda'
      93. 

  
    93.  },
      94. 

  
    94.  {
      95. 

  
    95.  id: 5,
      96. 

  
    96.  src: 'https://b.bdstatic.com/miniapp/development_tool/2020-6/1591258607615/a332aa39e1ff.mp4',
      97. 

  
    97.  poster: '../../common/images/poster2.png',
      98. 

  
    98.  title: '5聂远年轻照片跟现在几乎是判若两人终于明白为什么现在才火了',
      99. 

  
    99.  playNum: 1010000,
      100. 

  
    100.  authorName: '我是作者',
      101. 

  
    101.  authorImage: '../../common/images/author3.png',
      102. 

  
    102.  duration: '03:20',
      103. 

  
    103.  time: '2020年3月10日',
      104. 

  
    104.  introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这',
      105. 

  
    105.  type: 1,
      106. 

  
    106.  path: '/dasda'
      107. 

  
    107.  }
      108. 

  
    108.  ],
      109. 

  
    109.  // 运营位信息
      110. 

  
    110.  operateInfo: { 
      111. 

  
    111.  // 运营位封面
      112. 

  
    112.  img: '../../common/images/operational.png', 
      113. 

  
    113.  // 运营位落地页地址
      114. 

  
    114.  path: '/dsadassdsa' 
      115. 

  
    115.  }
      116. 

  
    116. }
      117.

    longVideoInfo 长视频信息说明

    字段名 类型 说明
    poster String 长视频封面图
    name String 长视频名称
    path String 长视频详情页路径，已完结、更新中的资源必须填写
    type String 资源类型，如：电视剧、电影、综艺、动漫等
    year String 发行时间
    area String 发行地区
    tags String 资源标签，建议1-3个
    update String 更新状态，如共X集、更新⾄X集、即将上映、已上映、更新至X期
    time String 单集片长，电视剧/综艺等可直接填写单集⽚⻓X分钟，电影可填写⽚⻓X分钟

    playVideoList 连播列表说明

    字段名 类型 说明
    id Number 视频 id
    src String 视频地址
    poster String 视频封面
    title String 视频标题
    playNum Number 视频播放次数
    authorName String 视频作者
    authorImage String 视频作者头像
    duration String 视频时长
    time String 视频上传时间
    introduction String 单视频简介
    type Number 视频类型，短视频为 1、长视频为2
    path String 视频落地页地址

    operateInfo 运营位信息说明

    字段名 类型 说明
    img String 运营位封面地址
    path String 运营位落地页地址

    npm 依赖

    名称 版本号
    @smt-ui/component ^1.1.41
    @smt-ui/content-component ^0.3.3

    Bug & Tip

    • Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
    • Tip：以上代码示例为纯客户端代码，可直接在模拟器和真机预览。
    • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
    • Tip：预览时，控制台报错[Dynamic(swan-interaction)][Request failed] get comment list fail with data:，是由于一站式互动组件需要填写正确的appid和snid，请开发者自行补充修改，修改方式参考一站式互动组件的使用方法。

    赞(0) 打赏
    未经允许不得转载：九八云安全 » 九八云百度小程序教程：page-video 短视频详情页模板
    分享到

    相关推荐

    评论 抢沙发

    取消

    攻防案列