×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：one-stop-interaction一站式互动组件

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

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

十余年的乌尔禾网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整乌尔禾建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“乌尔禾网站设计”,“乌尔禾网站推广”以来，每个客户项目都认真落实执行。

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

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

使用方式

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

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

 
 
 
    
  
  
  
  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 字段中声明组件引用。

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

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  {{header.title}}
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  {{header.author}}
    8. 
  
  
  
  8.  {{header.time}}
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  {{item.data}}
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20.  
    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.  
    28. 
  
  
  
  28.  
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30.  欢迎使用智能小程序动态库
    31. 
  
  
  
  31.  欢迎使用智能小程序动态库
    32. 
  
  
  
  32.  欢迎使用智能小程序动态库
    33. 
  
  
  
  33.  
    34. 
  
  
  
  34.  class="img">
    35. 
  
  
  
  35.  欢迎使用智能小程序动态库
    36. 
  
  
  
  36.  欢迎使用智能小程序动态库
    37. 
  
  
  
  37.  欢迎使用智能小程序动态库
    38. 
  
  
  
    39. 
  
  
  
  39.  
    40. 
  
  
  
  40.  
    41. 
  
  
  
  41.  comment-param="{{commentParam}}"
    42. 
  
  
  
  42.  detail-path="{{detailPath}}"
    43. 
  
  
  
  43.  toolbar-config="{{toolbarConfig}}"
    44. 
  
  
  
  44.  bindclickcomment="clickComment">
    45. 
  
  
  
  45.  
    46. 
  
  
  
    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
 
 
 
    
  
  
  
    2. 
  
  
  
  2.  comment-param="{{commentParam}}"
    3. 
  
  
  
  3.  srid="{{srid}}"
    4. 
  
  
  
  4.  need-like-btn="{{true}}"
    5. 
  
  
  
  5.  binddelete="detailDelete">
    6. 
  
  
  
    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
 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  {{header.title}}
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  {{header.author}}
    8. 
  
  
  
  8.  {{header.time}}
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.  {{item.data}}
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20.  
    21. 
  
  
  
  21.  
    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.  
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30.  
    31. 
  
  
  
    32. 
  
  
  
  32.  
    33. 
  
  
  
  33.  
    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.  
    43. 
  
  
  
  43.  
    44. 
  
  
  
    45. 
  
  
  
  45.  
    46. 
  
  
  
  46.  欢迎使用智能小程序动态库
    47. 
  
  
  
  47.  欢迎使用智能小程序动态库
    48. 
  
  
  
  48.  欢迎使用智能小程序动态库
    49. 
  
  
  
  49.  
    50. 
  
  
  
  50.  class="img">
    51. 
  
  
  
  51.  欢迎使用智能小程序动态库
    52. 
  
  
  
  52.  欢迎使用智能小程序动态库
    53. 
  
  
  
  53.  欢迎使用智能小程序动态库
    54. 
  
  
  
  54.  
    55. 
  
  
  
    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
 
 
 
    
  
  
  
    2. 
  
  
  
  2.  comment-param="{{commentParam}}"
    3. 
  
  
  
  3.  detail-path="{{detailPath}}"
    4. 
  
  
  
  4.  toolbar-config="{{toolbarConfig}}"
    5. 
  
  
  
  5.  bindclickcomment="clickComment">
    6. 
  
  
  
    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()来实现页面的跳转。

网站栏目：创新互联百度小程序教程：one-stop-interaction一站式互动组件
标题链接：http://cdbrznjsb.com/article/cohisje.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务