后浪云|香港服务器

后浪云百度小程序教程：one-stop-interaction 一站式互动组件

2023-1-5
  • one-stop-interaction 一站式互动组件
    • 使用方式
      • 图片示例
    • 评论列表支持折叠
      • 使用方式
    • Bug & Tip

    one-stop-interaction 一站式互动组件

    基础库 3.180.3 开始支持，低版本需做兼容处理。

    解释：一站式互动组件，为开发者提供一整套包含评论发布器、评论列表及详情、点赞、收藏、转发功能的互动 bar 能力，互动 bar 支持自定义，此外还提供数据存储、数据内容审核、用户接收百度 App 消息通知的一站式服务。

    使用了原 smart-sc 动态库引入的方式，请迁移到如下新的动态库方式接入。

    使用方式

    1.在项目中声明引用 swan-interaction 动态库

    在 app.json 文件配置的 dynamicLib 字段中增加对 swan-interaction 的引用，具体格式在使用动态库文档中查看。

    • JSON
     
 
 
      
  
  
  
    1.  "dynamicLib": {
      2. 
  
  
  
    2.  // 'myDynamicLib' 是个可自定义的别名。
      3. 
  
  
  
    3.  "myDynamicLib": {
      4. 
  
  
  
    4.  // provider 是要引用的动态库的名字，在此为 'swan-interaction'。
      5. 
  
  
  
    5.  "provider": "swan-interaction"
      6. 
  
  
  
    6.  }
      7. 
  
  
  
    7.  }
      8.

    2.创建一个带评论功能的页面，并在页面中声明引用 comment-list 组件
    动态库中的组件与其他自定义组件类似，都需要在 page 中使用。所以首先需要创建一个 page，page 路径可自定义，推荐路径为 pages/list/index（即在小程序页面目录 pages 下创建 list 文件夹，并在文件夹下创建 index.js、index.swan、index.css、index.json 页面文件)。

    页面中引用动态库组件的方式是：在页面的 json 配置的 usingSwanComponents 字段中声明组件引用。

    • JSON
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "评论列表",
      3. 
  
  
  
    3.  "usingSwanComponents": {
      4. 
  
  
  
    4.  "comment-list": "dynamicLib://myDynamicLib/comment-list"
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. }
      7.

    在页面中放入列表组件，传入必要的参数，组件详情配置请参考 comment-list 评论列表组件。

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
    1. <view>
      2. 
  
  
  
    2.  <view class="article-header">
      3. 
  
  
  
    3.  <text class="title" selectable="true">{{header.title}}</text>
      4. 
  
  
  
    4.  <view class="source">
      5. 
  
  
  
    5.  <image s-if="!!header.avatar" src="{{header.avatar}}"/>
      6. 
  
  
  
    6.  <view class="info">
      7. 
  
  
  
    7.  <text class="author">{{header.author}}</text>
      8. 
  
  
  
    8.  <text class="time">{{header.time}}</text>
      9. 
  
  
  
    9.  </view>
      10. 
  
  
  
    10.  </view>
      11. 
  
  
  
    11.  </view>
      12. 
  
  
  
    12.  <view class="article-content">
      13. 
  
  
  
    13.  <block s-for="{{content.items}}" s-for-index="eleIndex">
      14. 
  
  
  
    14.  <block s-if="{{item.type === 'text'}}">
      15. 
  
  
  
    15.  <view class="content-p" data-index="{{eleIndex}}">
      16. 
  
  
  
    16.  <text selectable="true">{{item.data}}</text>
      17. 
  
  
  
    17.  </view>
      18. 
  
  
  
    18.  </block>
      19. 
  
  
  
    19.  <block s-elif="{{item.type === 'image'}}">
      20. 
  
  
  
    20.  <image
      21. 
  
  
  
    21.  class="content-img"
      22. 
  
  
  
    22.  src="{{item.data.src}}"
      23. 
  
  
  
    23.  original-src="{{item.data.src}}"
      24. 
  
  
  
    24.  mode="widthFix"
      25. 
  
  
  
    25.  preview="true"
      26. 
  
  
  
    26.  lazy-load="true"/>
      27. 
  
  
  
    27.  </block>
      28. 
  
  
  
    28.  </block>
      29. 
  
  
  
    29.  </view>
      30. 
  
  
  
    30.  <view>欢迎使用智能小程序动态库
      31. 
  
  
  
    31.  欢迎使用智能小程序动态库
      32. 
  
  
  
    32.  欢迎使用智能小程序动态库</view>
      33. 
  
  
  
    33.  <image src="https://b.bdstatic.com/miniapp/images/demo-dog.png"
      34. 
  
  
  
    34.  class="img"></image>
      35. 
  
  
  
    35.  <view>欢迎使用智能小程序动态库
      36. 
  
  
  
    36.  欢迎使用智能小程序动态库
      37. 
  
  
  
    37.  欢迎使用智能小程序动态库</view>
      38. 
  
  
  
      39. 
  
  
  
    39.  <!-- 评论列表组件 -->
      40. 
  
  
  
    40.  <comment-list class="list"
      41. 
  
  
  
    41.  comment-param="{{commentParam}}"
      42. 
  
  
  
    42.  detail-path="{{detailPath}}"
      43. 
  
  
  
    43.  toolbar-config="{{toolbarConfig}}"
      44. 
  
  
  
    44.  bindclickcomment="clickComment">
      45. 
  
  
  
    45.  </comment-list>
      46. 
  
  
  
    46. </view>
      47. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  commentParam: {},
      4. 
  
  
  
    4.  header: {
      5. 
  
  
  
    5.  title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛',
      6. 
  
  
  
    6.  avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
      7. 
  
  
  
    7.  author: '百度智能小程序',
      8. 
  
  
  
    8.  time: '2020年04月14日'
      9. 
  
  
  
    9.  },
      10. 
  
  
  
    10.  content: {
      11. 
  
  
  
    11.  items: [
      12. 
  
  
  
    12.  {
      13. 
  
  
  
    13.  type: 'text',
      14. 
  
  
  
    14.  data: '测试文字'
      15. 
  
  
  
    15.  }
      16. 
  
  
  
    16.  ]
      17. 
  
  
  
    17.  },
      18. 
  
  
  
    18.  detailPath: '/pages/detail/index?params1=abd',
      19. 
  
  
  
    19.  // 底部互动 bar 的配置
      20. 
  
  
  
    20.  toolbarConfig: {
      21. 
  
  
  
    21.  // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
      22. 
  
  
  
    22.  share: {
      23. 
  
  
  
    23.  title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛'
      24. 
  
  
  
    24.  }
      25. 
  
  
  
    25.  }
      26. 
  
  
  
    26.  },
      27. 
  
  
  
      28. 
  
  
  
    28.  onLoad(query) {
      29. 
  
  
  
    29.  this.setData({
      30. 
  
  
  
    30.  commentParam: {
      31. 
  
  
  
    31.  snid: '10070000311753961',
      32. 
  
  
  
    32.  path: '/pages/comment/index?snid=test_snid57',
      33. 
  
  
  
    33.  title: '测试文章标题',
      34. 
  
  
  
    34.  content: '测试文章内容',
      35. 
  
  
  
    35.  images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
      36. 
  
  
  
    36.  }
      37. 
  
  
  
    37.  });
      38. 
  
  
  
    38.  },
      39. 
  
  
  
      40. 
  
  
  
    40.  onReady() {
      41. 
  
  
  
    41.  // 用于实现页面间的跳转
      42. 
  
  
  
    42.  requireDynamicLib('myDynamicLib').listenEvent();
      43. 
  
  
  
    43.  },
      44. 
  
  
  
      45. 
  
  
  
    45.  clickComment(e) {
      46. 
  
  
  
    46.  }
      47. 
  
  
  
    47. });
      48. 
 
 
 
     
 
 
      
  
  
  
    1. .article-header {
      2. 
  
  
  
    2.  padding: 0 17px;
      3. 
  
  
  
    3. }
      4. 
  
  
  
      5. 
  
  
  
    5. .article-header .title {
      6. 
  
  
  
    6.  display: block;
      7. 
  
  
  
    7.  font-size: 24px;
      8. 
  
  
  
    8.  line-height: 1.5;
      9. 
  
  
  
    9.  font-weight: 700;
      10. 
  
  
  
    10. }
      11. 
  
  
  
      12. 
  
  
  
    12. .article-header .source {
      13. 
  
  
  
    13.  margin-top: 24px;
      14. 
  
  
  
    14.  display: flex;
      15. 
  
  
  
    15.  align-items: flex-start;
      16. 
  
  
  
    16. }
      17. 
  
  
  
      18. 
  
  
  
    18. .article-header .source image {
      19. 
  
  
  
    19.  width: 35px;
      20. 
  
  
  
    20.  height: 35px;
      21. 
  
  
  
    21.  border-radius: 100%;
      22. 
  
  
  
    22.  margin-right: 8px;
      23. 
  
  
  
    23.  background-color: #eef1f4;
      24. 
  
  
  
    24.  background-size: 16px 16px;
      25. 
  
  
  
    25.  background-repeat: no-repeat;
      26. 
  
  
  
    26.  background-position: center center;
      27. 
  
  
  
    27.  background-image: url(../common/assets/logo-default.png);
      28. 
  
  
  
    28. }
      29. 
  
  
  
      30. 
  
  
  
    30. .article-header .info {
      31. 
  
  
  
    31.  display: flex;
      32. 
  
  
  
    32.  flex-direction: column;
      33. 
  
  
  
    33.  justify-content: center;
      34. 
  
  
  
    34.  height: 35px;
      35. 
  
  
  
    35. }
      36. 
  
  
  
      37. 
  
  
  
    37. .article-header .info .author {
      38. 
  
  
  
    38.  font-size: 16px;
      39. 
  
  
  
    39.  line-height: 1;
      40. 
  
  
  
    40.  display: block;
      41. 
  
  
  
    41.  color: #000;
      42. 
  
  
  
    42.  margin-bottom: 7px;
      43. 
  
  
  
    43. }
      44. 
  
  
  
      45. 
  
  
  
    45. .article-header .info .time {
      46. 
  
  
  
    46.  display: block;
      47. 
  
  
  
    47.  color: #999;
      48. 
  
  
  
    48.  font-size: 12px;
      49. 
  
  
  
    49.  line-height: 1;
      50. 
  
  
  
    50. }
      51. 
  
  
  
      52. 
  
  
  
    52. .article-content {
      53. 
  
  
  
    53.  color: #000;
      54. 
  
  
  
    54.  font-size: 19px;
      55. 
  
  
  
    55.  line-height: 1.58;
      56. 
  
  
  
    56.  letter-spacing: 2.84;
      57. 
  
  
  
    57.  margin-bottom: 30px;
      58. 
  
  
  
    58. }
      59. 
  
  
  
      60. 
  
  
  
    60. .article-content .content-img {
      61. 
  
  
  
    61.  width: 100%;
      62. 
  
  
  
    62.  margin-top: 30px;
      63. 
  
  
  
    63.  vertical-align: bottom;
      64. 
  
  
  
    64.  background-color: #eef1f4;
      65. 
  
  
  
    65.  background-size: 32px 32px;
      66. 
  
  
  
    66.  background-repeat: no-repeat;
      67. 
  
  
  
    67.  background-position: center center;
      68. 
  
  
  
    68.  background-image: url(../common/assets/logo-default.png);
      69. 
  
  
  
    69. }
      70. 
  
  
  
      71. 
  
  
  
    71. .article-content .content-p {
      72. 
  
  
  
    72.  margin: 24.5px 17px -5.5px 17px;
      73. 
  
  
  
    73.  text-align: justify;
      74. 
  
  
  
    74.  word-break: break-all;
      75. 
  
  
  
    75. }
      76.

    3.创建一个评论详情页面，并在页面中声明引用 comment-detail 组件
    动态库中的组件与其他自定义组件类似，都需要在 page 中使用。所以首先需要创建一个 page，page 路径可自定义，推荐路径为 pages/detail/index（即在小程序页面目录 pages 下创建 detail 文件夹，并在文件夹下创建 index.js、index.swan、index.css、index.json 页面文件)。

    页面中引用动态库组件的方式是：在页面的 json 配置的 usingSwanComponents 字段中声明组件引用。

    • JSON
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "评论详情",
      3. 
  
  
  
    3.  "usingSwanComponents": {
      4. 
  
  
  
    4.  "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. }
      7.

    在页面中放入详情组件，传入必要的参数，组件详情配置请参考 comment-detail 评论详情组件。

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <comment-detail
      2. 
  
  
  
    2.  comment-param="{{commentParam}}"
      3. 
  
  
  
    3.  srid="{{srid}}"
      4. 
  
  
  
    4.  need-like-btn="{{true}}"
      5. 
  
  
  
    5.  binddelete="detailDelete">
      6. 
  
  
  
    6. </comment-detail>
      7. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  srid: '',
      4. 
  
  
  
    4.  commentParam: {}
      5. 
  
  
  
    5.  },
      6. 
  
  
  
    6.  onLoad(options) {
      7. 
  
  
  
    7.  if (options) {
      8. 
  
  
  
    8.  this.setData({
      9. 
  
  
  
    9.  srid: options.srid
      10. 
  
  
  
    10.  });
      11. 
  
  
  
    11.  }
      12. 
  
  
  
      13. 
  
  
  
    13.  const param = getApp().globalData.commentParam;
      14. 
  
  
  
      15. 
  
  
  
    15.  if (param && Object.keys(param).length) {
      16. 
  
  
  
    16.  this.setData({
      17. 
  
  
  
    17.  'commentParam': param
      18. 
  
  
  
    18.  });
      19. 
  
  
  
    19.  }
      20. 
  
  
  
    20.  else {
      21. 
  
  
  
    21.  this.setData({
      22. 
  
  
  
    22.  commentParam: {
      23. 
  
  
  
    23.  snid: '10070000311753961',
      24. 
  
  
  
    24.  path: '/pages/comment/index?snid=test_snid57',
      25. 
  
  
  
    25.  title: '测试文章标题'
      26. 
  
  
  
    26.  }
      27. 
  
  
  
    27.  });
      28. 
  
  
  
    28.  }
      29. 
  
  
  
    29.  }
      30. 
  
  
  
    30. });
      31.

    图片示例

    评论列表支持折叠

    对于部分开发者，在评论列表下方希望放入广告等推荐区域，故评论列表支持折叠使用。

    使用方式

    1.创建一个带评论功能的页面，并在页面中声明引用 comment-list 组件
    在页面中放入列表组件，传入必要的可折叠参数，组件详情配置请参考 comment-list 评论列表组件。

    • SWAN
    • JS
    • JSON
    • CSS
     
 
 
      
  
  
  
    1. <view>
      2. 
  
  
  
    2.  <view class="article-header">
      3. 
  
  
  
    3.  <text class="title" selectable="true">{{header.title}}</text>
      4. 
  
  
  
    4.  <view class="source">
      5. 
  
  
  
    5.  <image s-if="!!header.avatar" src="{{header.avatar}}"/>
      6. 
  
  
  
    6.  <view class="info">
      7. 
  
  
  
    7.  <text class="author">{{header.author}}</text>
      8. 
  
  
  
    8.  <text class="time">{{header.time}}</text>
      9. 
  
  
  
    9.  </view>
      10. 
  
  
  
    10.  </view>
      11. 
  
  
  
    11.  </view>
      12. 
  
  
  
      13. 
  
  
  
    13.  <view class="article-content">
      14. 
  
  
  
    14.  <block s-for="{{content.items}}" s-for-index="eleIndex">
      15. 
  
  
  
    15.  <block s-if="{{item.type === 'text'}}">
      16. 
  
  
  
    16.  <view class="content-p" data-index="{{eleIndex}}">
      17. 
  
  
  
    17.  <text selectable="true">{{item.data}}</text>
      18. 
  
  
  
    18.  </view>
      19. 
  
  
  
    19.  </block>
      20. 
  
  
  
    20.  <block s-elif="{{item.type === 'image'}}">
      21. 
  
  
  
    21.  <image
      22. 
  
  
  
    22.  class="content-img"
      23. 
  
  
  
    23.  src="{{item.data.src}}"
      24. 
  
  
  
    24.  original-src="{{item.data.src}}"
      25. 
  
  
  
    25.  mode="widthFix"
      26. 
  
  
  
    26.  preview="true"
      27. 
  
  
  
    27.  lazy-load="true"/>
      28. 
  
  
  
    28.  </block>
      29. 
  
  
  
    29.  </block>
      30. 
  
  
  
    30.  </view>
      31. 
  
  
  
      32. 
  
  
  
    32.  <!-- 评论列表支持折叠 -->
      33. 
  
  
  
    33.  <comment-list class="list"
      34. 
  
  
  
    34.  comment-param="{{commentParam}}"
      35. 
  
  
  
    35.  detail-path="{{detailPath}}"
      36. 
  
  
  
    36.  is-folded="{{true}}"
      37. 
  
  
  
    37.  fold-num="{{foldNum}}"
      38. 
  
  
  
    38.  toolbar-config="{{toolbarConfig}}"
      39. 
  
  
  
    39.  view-more-path="{{viewMorePath}}"
      40. 
  
  
  
    40.  bindclickcomment="clickComment"
      41. 
  
  
  
    41.  bindviewmore="viewMore">
      42. 
  
  
  
    42.  </comment-list>
      43. 
  
  
  
    43.  <view class="comment-list-folded-bottom-margin"></view>
      44. 
  
  
  
      45. 
  
  
  
    45.  <view class="list-after">
      46. 
  
  
  
    46.  <view>欢迎使用智能小程序动态库
      47. 
  
  
  
    47.  欢迎使用智能小程序动态库
      48. 
  
  
  
    48.  欢迎使用智能小程序动态库</view>
      49. 
  
  
  
    49.  <image src="https://b.bdstatic.com/miniapp/images/demo-dog.png"
      50. 
  
  
  
    50.  class="img"></image>
      51. 
  
  
  
    51.  <view>欢迎使用智能小程序动态库
      52. 
  
  
  
    52.  欢迎使用智能小程序动态库
      53. 
  
  
  
    53.  欢迎使用智能小程序动态库</view>
      54. 
  
  
  
    54.  </view>
      55. 
  
  
  
    55. </view>
      56. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  commentParam: {},
      4. 
  
  
  
    4.  header: {
      5. 
  
  
  
    5.  title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛',
      6. 
  
  
  
    6.  avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
      7. 
  
  
  
    7.  author: '百度智能小程序',
      8. 
  
  
  
    8.  time: '2020年04月14日'
      9. 
  
  
  
    9.  },
      10. 
  
  
  
    10.  content: {
      11. 
  
  
  
    11.  items: [
      12. 
  
  
  
    12.  {
      13. 
  
  
  
    13.  type: 'image',
      14. 
  
  
  
    14.  data: {
      15. 
  
  
  
    15.  src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
      16. 
  
  
  
    16.  }
      17. 
  
  
  
    17.  },
      18. 
  
  
  
    18.  {
      19. 
  
  
  
    19.  type: 'text',
      20. 
  
  
  
    20.  data: '测试文字'
      21. 
  
  
  
    21.  }
      22. 
  
  
  
    22.  ]
      23. 
  
  
  
    23.  },
      24. 
  
  
  
    24.  // 评论详情页面路径
      25. 
  
  
  
    25.  detailPath: '/pages/detail/index?params1=abd',
      26. 
  
  
  
    26.  // 全部评论页面路径
      27. 
  
  
  
    27.  viewMorePath: '/pages/all-list/index',
      28. 
  
  
  
    28.  // 折叠展示最大评论条数
      29. 
  
  
  
    29.  foldNum: 5,
      30. 
  
  
  
    30.  // 底部互动 bar 的配置
      31. 
  
  
  
    31.  toolbarConfig: {
      32. 
  
  
  
    32.  // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
      33. 
  
  
  
    33.  share: {
      34. 
  
  
  
    34.  title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛'
      35. 
  
  
  
    35.  }
      36. 
  
  
  
    36.  }
      37. 
  
  
  
    37.  },
      38. 
  
  
  
      39. 
  
  
  
    39.  onLoad(query) {
      40. 
  
  
  
    40.  this.setData({
      41. 
  
  
  
    41.  commentParam: {
      42. 
  
  
  
    42.  snid: '10070000311753961',
      43. 
  
  
  
    43.  path: '/pages/comment/index?snid=test_snid57',
      44. 
  
  
  
    44.  title: '测试文章标题',
      45. 
  
  
  
    45.  content: '测试文章内容',
      46. 
  
  
  
    46.  images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
      47. 
  
  
  
    47.  }
      48. 
  
  
  
    48.  });
      49. 
  
  
  
    49.  },
      50. 
  
  
  
      51. 
  
  
  
    51.  onReady() {
      52. 
  
  
  
    52.  // 用于实现页面间的跳转
      53. 
  
  
  
    53.  requireDynamicLib('myDynamicLib').listenEvent();
      54. 
  
  
  
    54.  },
      55. 
  
  
  
    55.  clickComment(e) {
      56. 
  
  
  
    56.  },
      57. 
  
  
  
      58. 
  
  
  
    58.  viewMore() {
      59. 
  
  
  
    59.  swan.showToast({
      60. 
  
  
  
    60.  title: 'click success'
      61. 
  
  
  
    61.  });
      62. 
  
  
  
    62.  }
      63. 
  
  
  
    63. });
      64. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "折叠列表页",
      3. 
  
  
  
    3.  "usingSwanComponents": {
      4. 
  
  
  
    4.  "comment-list": "dynamicLib://myDynamicLib/comment-list"
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. }
      7. 
 
 
 
     
 
 
      
  
  
  
    1. .article-header {
      2. 
  
  
  
    2.  padding: 0 39.8rpx;
      3. 
  
  
  
    3. }
      4. 
  
  
  
      5. 
  
  
  
    5. .article-header .title {
      6. 
  
  
  
    6.  display: block;
      7. 
  
  
  
    7.  font-size: 56rpx;
      8. 
  
  
  
    8.  line-height: 1.5;
      9. 
  
  
  
    9.  font-weight: 700;
      10. 
  
  
  
    10. }
      11. 
  
  
  
      12. 
  
  
  
    12. .article-header .source {
      13. 
  
  
  
    13.  margin-top: 56rpx;
      14. 
  
  
  
    14.  display: flex;
      15. 
  
  
  
    15.  align-items: flex-start;
      16. 
  
  
  
    16. }
      17. 
  
  
  
      18. 
  
  
  
    18. .article-header .source image {
      19. 
  
  
  
    19.  width: 82rpx;
      20. 
  
  
  
    20.  height: 82rpx;
      21. 
  
  
  
    21.  border-radius: 100%;
      22. 
  
  
  
    22.  margin-right: 18.7rpx;
      23. 
  
  
  
    23.  background-color: #eef1f4;
      24. 
  
  
  
    24.  background-size: 37.4rpx 37.4rpx;
      25. 
  
  
  
    25.  background-repeat: no-repeat;
      26. 
  
  
  
    26.  background-position: center center;
      27. 
  
  
  
    27.  background-image: url(../common/assets/logo-default.png);
      28. 
  
  
  
    28. }
      29. 
  
  
  
      30. 
  
  
  
    30. .article-header .info {
      31. 
  
  
  
    31.  display: flex;
      32. 
  
  
  
    32.  flex-direction: column;
      33. 
  
  
  
    33.  justify-content: center;
      34. 
  
  
  
    34.  height: 82rpx;
      35. 
  
  
  
    35. }
      36. 
  
  
  
      37. 
  
  
  
    37. .article-header .info .author {
      38. 
  
  
  
    38.  font-size: 37.4rpx;
      39. 
  
  
  
    39.  line-height: 1;
      40. 
  
  
  
    40.  display: block;
      41. 
  
  
  
    41.  color: #000;
      42. 
  
  
  
    42.  margin-bottom: 16.4rpx;
      43. 
  
  
  
    43. }
      44. 
  
  
  
      45. 
  
  
  
    45. .article-header .info .time {
      46. 
  
  
  
    46.  display: block;
      47. 
  
  
  
    47.  color: #999;
      48. 
  
  
  
    48.  font-size: 28rpx;
      49. 
  
  
  
    49.  line-height: 1;
      50. 
  
  
  
    50. }
      51. 
  
  
  
      52. 
  
  
  
    52. .article-content {
      53. 
  
  
  
    53.  color: #000;
      54. 
  
  
  
    54.  font-size: 44.5rpx;
      55. 
  
  
  
    55.  line-height: 1.58;
      56. 
  
  
  
    56.  letter-spacing: 2.84;
      57. 
  
  
  
    57.  margin-bottom: 70.2rpx;
      58. 
  
  
  
    58. }
      59. 
  
  
  
      60. 
  
  
  
    60. .article-content .content-img {
      61. 
  
  
  
    61.  width: 100%;
      62. 
  
  
  
    62.  margin-top: 70.2rpx;
      63. 
  
  
  
    63.  vertical-align: bottom;
      64. 
  
  
  
    64.  background-color: #eef1f4;
      65. 
  
  
  
    65.  background-size: 74.9rpx 74.9rpx;
      66. 
  
  
  
    66.  background-repeat: no-repeat;
      67. 
  
  
  
    67.  background-position: center center;
      68. 
  
  
  
    68.  background-image: url(../common/assets/logo-default.png);
      69. 
  
  
  
    69. }
      70. 
  
  
  
      71. 
  
  
  
    71. .article-content .content-p {
      72. 
  
  
  
    72.  margin: 57.3rpx 39.8rpx -12.9rpx 39.8rpx;
      73. 
  
  
  
    73.  text-align: justify;
      74. 
  
  
  
    74.  word-break: break-all;
      75. 
  
  
  
    75. }
      76. 
  
  
  
      77. 
  
  
  
    77. .list-after {
      78. 
  
  
  
    78.  padding: 30rpx 18rpx 90rpx;
      79. 
  
  
  
    79. }
      80. 
  
  
  
      81. 
  
  
  
    81. .comment-list-folded-bottom-margin {
      82. 
  
  
  
    82.  height: 14.4rpx;
      83. 
  
  
  
    83.  background-color: #f5f5f5;
      84. 
  
  
  
    84. }
      85.

    2.创建一个展示全部评论的页面，并在页面中声明引用 comment-list 组件
    我们建议全部评论的页面，互动 bar 仅保留评论发布。组件配置请参考 comment-list 评论列表组件。

    • SWAN
    • JS
    • JSON
     
 
 
      
  
  
  
    1. <comment-list
      2. 
  
  
  
    2.  comment-param="{{commentParam}}"
      3. 
  
  
  
    3.  detail-path="{{detailPath}}"
      4. 
  
  
  
    4.  toolbar-config="{{toolbarConfig}}"
      5. 
  
  
  
    5.  bindclickcomment="clickComment">
      6. 
  
  
  
    6. </comment-list>
      7. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  commentParam: {},
      4. 
  
  
  
    4.  toolbarConfig: {
      5. 
  
  
  
    5.  moduleList: []
      6. 
  
  
  
    6.  },
      7. 
  
  
  
    7.  detailPath: '/pages/detail/index?params1=abd'
      8. 
  
  
  
    8.  },
      9. 
  
  
  
      10. 
  
  
  
    10.  onInit() {
      11. 
  
  
  
    11.  this.isOnInitCalled = true;
      12. 
  
  
  
    12.  this.init();
      13. 
  
  
  
    13.  },
      14. 
  
  
  
      15. 
  
  
  
    15.  onLoad() {
      16. 
  
  
  
    16.  // 兼容不支持 onInit 的版本
      17. 
  
  
  
    17.  if (!this.isOnInitCalled) {
      18. 
  
  
  
    18.  this.init();
      19. 
  
  
  
    19.  }
      20. 
  
  
  
    20.  },
      21. 
  
  
  
      22. 
  
  
  
    22.  init() {
      23. 
  
  
  
    23.  const commentParam = getApp().globalData.commentParam;
      24. 
  
  
  
    24.  if (commentParam && Object.keys(commentParam).length) {
      25. 
  
  
  
    25.  this.setData({
      26. 
  
  
  
    26.  commentParam
      27. 
  
  
  
    27.  });
      28. 
  
  
  
    28.  }
      29. 
  
  
  
    29.  else {
      30. 
  
  
  
    30.  this.setData({
      31. 
  
  
  
    31.  commentParam: {
      32. 
  
  
  
    32.  snid: '10070000311753961',
      33. 
  
  
  
    33.  path: '/pages/comment/index?snid=test_snid57',
      34. 
  
  
  
    34.  title: '测试文章标题'
      35. 
  
  
  
    35.  }
      36. 
  
  
  
    36.  });
      37. 
  
  
  
      38. 
  
  
  
    38.  }
      39. 
  
  
  
    39.  },
      40. 
  
  
  
      41. 
  
  
  
    41.  onReady() {
      42. 
  
  
  
    42.  // 用于实现页面间的跳转
      43. 
  
  
  
    43.  requireDynamicLib('myDynamicLib').listenEvent();
      44. 
  
  
  
    44.  },
      45. 
  
  
  
    45.  clickComment(e) {
      46. 
  
  
  
    46.  }
      47. 
  
  
  
    47. });
      48. 
 
 
 
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "navigationBarTitleText": "全部评论",
      3. 
  
  
  
    3.  "usingSwanComponents": {
      4. 
  
  
  
    4.  "comment-list": "dynamicLib://myDynamicLib/comment-list"
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. }
      7.

    3.创建一个评论详情页面，并在页面中声明引用 comment-detail 组件

    Bug & Tip

    • Tip：使用 Mars 等第三方框架开发小程序时，可能存在 setData 的异步延时，如在评论详情页 srid 作为单独参数传入没有生效，可作为 commentParam 中的字段传入。
    • Tip：原有一站式互动组件 smart-sc 因性能问题，对用户流量产生影响，为避免影响线上已接入用户，本次新的一站式互动组件采用新的动态库。
    • Tip：原有一站式互动组件的部分 bug ，如点赞状态失效等，已在新一站式组件中修复。
    • Tip：新的一站式互动组件，通用性更强，除了页面级别，也支持浮层的使用。
    • Tip：在 onLoad 和 onReady 生命周期内引入requireDynamicLib('myDynamicLib').listenEvent()来实现页面的跳转。
    版权声明：
    作者：后浪云
    链接：https://idc.net/help/186077/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    相关推荐
    后浪云小程序云教程：云开发 云开发能力
    后浪云Knockout教程：第十章：更多信息（完结篇）
    后浪云Flutter教程：Flutter 布局方法
    后浪云小程序云教程：云开发 HTTP处理
    后浪云小程序云教程：云开发 CloudBase CLI
    后浪云UNI-APP教程：其他项目转 uni-app
    后浪云小程序云教程：云开发 链接与图片
    后浪云SDK教程：第九章 Manifest文件
    后浪云React教程：在设备上运行(Android)
    后浪云百度小程序教程：grid 宫格
    后浪云百度小程序教程：CanvasContext.setMiterLimit
    后浪云小程序教程：微信小程序API 视频解码器·VideoDecoder实例
    后浪云小程序教程：微信小程序 WeUI·导航组件
    后浪云百度小程序教程：CanvasContext.lineTo
    后浪云百度小程序教程：二维码短链
    后浪云小程序教程：微信小程序云开发 API云函数
    友情链接：USA VPSVPS.DO
    Copyright © 2008 - 2026 IDC.Net 版权所有
    Internet Data Corporation | 网络数据集团（美国）