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

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

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

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

使用方式

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

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

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

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

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

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

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

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

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

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

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

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

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

图片示例

one-stop-interaction 一站式互动 - 图1

评论列表支持折叠

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

使用方式

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

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

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

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

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

Bug & Tip

  • Tip：使用 Mars 等第三方框架开发小程序时，可能存在 setData 的异步延时，如在评论详情页 srid 作为单独参数传入没有生效，可作为 commentParam 中的字段传入。
  • Tip：原有一站式互动组件 smart-sc 因性能问题，对用户流量产生影响，为避免影响线上已接入用户，本次新的一站式互动组件采用新的动态库。
  • Tip：原有一站式互动组件的部分 bug ，如点赞状态失效等，已在新一站式组件中修复。
  • Tip：新的一站式互动组件，通用性更强，除了页面级别，也支持浮层的使用。
  • Tip：在 onLoad 和 onReady 生命周期内引入requireDynamicLib('myDynamicLib').listenEvent()来实现页面的跳转。