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

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

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

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

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

    解释：一站式互动组件，为开发者提供一整套包含评论发布器、评论列表及详情、点赞、收藏、转发功能的互动 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
     
 
 
      
  
  
  
      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://www.mswzjz.com/qtweb/news32/175932.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    面包屑导航知识

    分类信息网

    php空间　　 　宜宾冠赛网站　　 　成都企业网站建设　　 　成都网创优客　　 　界面设计　　 　格蓝特设备　　 　内江托管服务器　　 　成都主机托管　　 　成都门窗定制　　 　重庆网站建设　　 　成都网站推广　　 　重庆电商网站定制　　 　建站公司　　 　重庆网站建设　　 　网站建设　　 　一元广告　　 　成都服务器托管　　 　手机网站制作设计　　 　成都网站推广　　 　大吉雪茄