创新互联百度小程序教程：page-video短视频详情页模板

  • 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.  
      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.  
      18. 
  
  
  
      19. 
  
  
  
    19.  
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  接下来播放
      22. 
  
  
  
    22.  {{remainingTime}}s后播放
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  
      25. 
  
  
  
    25.  
      26. 
  
  
  
    26.  {{playVideoList[nextIndex].title}}
      27. 
  
  
  
    27.  {{playVideoList[nextIndex].playNum}}次播放
      28. 
  
  
  
    28.  立即播放
      29. 
  
  
  
    29.  
      30. 
  
  
  
    30.  
      31. 
  
  
  
    31.  
      32. 
  
  
  
    32.  
      33. 
  
  
  
    33.  
      34. 
  
  
  
    34.  重播
      35. 
  
  
  
    35.  
      36. 
  
  
  
    36.  
      37. 
  
  
  
    37.  
      38. 
  
  
  
    38.  观看正片
      39. 
  
  
  
    39.  
      40. 
  
  
  
    40.  
      41. 
  
  
  
    41.  
      42. 
  
  
  
      43. 
  
  
  
    43.  
      44. 
  
  
  
    44.  
      45. 
  
  
  
    45.  
      46. 
  
  
  
    46.  
      47. 
  
  
  
    47.  重播
      48. 
  
  
  
    48.  <
      49. 
  
  
  
    49.  
      50. 
  
  
  
    50.  即将播放：{{playVideoList[nextIndex].title}}
      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
     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  {{playVideoList[playIndex].title}}
      5. 
  
  
  
    5.  
      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.  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  {{playVideoList[playIndex].playNum}}次播放
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  s-if="{{playVideoList[playIndex].authorImage}}" src="{{playVideoList[nextIndex].autorImage}}">
      16. 
  
  
  
    16.  {{playVideoList[playIndex].authorName}}
      17. 
  
  
  
    17.  
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19.  s-if="{{introSwitch && (playVideoList[playIndex].time || playVideoList[playIndex].introduction)}}">
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  发布时间：{{playVideoList[playIndex].time}}
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  s-if="{{playVideoList[playIndex].introduction}}">{{playVideoList[playIndex].introduction}}
      25. 
  
  
  
    25.  
      26. 
  
  
  
    26.  
      27. 
  
  
  
      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

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  {{longVideoInfo.name}}
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  {{longVideoInfo.info}}
      17. 
  
  
  
    17.  
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19.  
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  data-path="{{longVideoInfo.path}}">观看正片
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  s-if="{{longVideoInfo.path || longVideoInfo.bookInfo}}">加入书架
      25. 
  
  
  
    25.  
      26. 
  
  
  
    26.  
      27. 
  
  
  
    27.  report-type="subscribe" template-id="BD2305" subscribe-id="1235" bindsubmit="formSubmit">
      28. 
  
  
  
    28.  
      29. 
  
  
  
    29.  
      30. 
  
  
  
    30.  
      31. 
  
  
  
    31.  
      32. 
  
  
  
      33.

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

    • SWAN

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
      4.

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

    • SWAN

     
 
 
      
  
  
  
      2. 
  
  
  
      3.

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

    • SWAN

    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  {{item.title}}
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  {{item.playNum}}次播放
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  {{item.duration}}
      17. 
  
  
  
    17.  
      18. 
  
  
  
    18.  
      19. 
  
  
  
      20. 
  
  
  
      21. 
  
  
  
    21.  
      22. 
  
  
  
    22.  {{feedMore ? '查看更多': '没有更多了'}}
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  
      25. 
  
  
  
      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
     
 
 
      
  
  
  
      2. 
  
  
  
      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. 
  
  
  
      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
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  comment-param="{{commentParam}}"
      3. 
  
  
  
    3.  srid="{{srid}}">
      4. 
  
  
  
      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.  // 资源类型，如：电视剧            
      
                当前名称：创新互联百度小程序教程：page-video短视频详情页模板
                
      
                本文来源：http://www.shufengxianlan.com/qtweb/news2/285302.html
            
      
            
      
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联

    猜你还喜欢下面的内容

    外贸网站建设知识

    分类信息网

    网站推广　　 　自适应网页设计　　 　雅安主机托管　　 　服务器机柜租用　　 　网站搜索引擎优化　　 　专业网站建设　　 　电商网站建设方案　　 　电商网站　　 　普特斯腐植酸　　 　正泰动物制药　　 　双流做网站　　 　成都网站建设　　 　四川艾名斯　　 　贵安服务器托管　　 　江油做网站　　 　彭山网站制作　　 　眉山电信机房　　 　做移动网站　　 　温江做网站　　 　大橙子建站