one-stop-interaction 一站式互動(dòng)組件

基礎(chǔ)庫(kù) 3.180.3 開始支持，低版本需做兼容處理。
十余年的烏爾禾網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整烏爾禾建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“烏爾禾網(wǎng)站設(shè)計(jì)”,“烏爾禾網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

解釋：一站式互動(dòng)組件，為開發(fā)者提供一整套包含評(píng)論發(fā)布器、評(píng)論列表及詳情、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)功能的互動(dòng) bar 能力，互動(dòng) bar 支持自定義，此外還提供數(shù)據(jù)存儲(chǔ)、數(shù)據(jù)內(nèi)容審核、用戶接收百度 App 消息通知的一站式服務(wù)。

使用了原 smart-sc 動(dòng)態(tài)庫(kù)引入的方式，請(qǐng)遷移到如下新的動(dòng)態(tài)庫(kù)方式接入。

使用方式

1.在項(xiàng)目中聲明引用 swan-interaction 動(dòng)態(tài)庫(kù)

在 app.json 文件配置的 dynamicLib 字段中增加對(duì) swan-interaction 的引用，具體格式在使用動(dòng)態(tài)庫(kù)文檔中查看。

JSON

 
 
 
  
  
   "dynamicLib": {
  
  
   // 'myDynamicLib' 是個(gè)可自定義的別名。
  
  
   "myDynamicLib": {
  
  
   // provider 是要引用的動(dòng)態(tài)庫(kù)的名字，在此為 'swan-interaction'。
  
  
   "provider": "swan-interaction"
  
  
   }
  
  
   }

2.創(chuàng)建一個(gè)帶評(píng)論功能的頁(yè)面，并在頁(yè)面中聲明引用 comment-list 組件
動(dòng)態(tài)庫(kù)中的組件與其他自定義組件類似，都需要在 page 中使用。所以首先需要?jiǎng)?chuàng)建一個(gè) page，page 路徑可自定義，推薦路徑為 pages/list/index（即在小程序頁(yè)面目錄 pages 下創(chuàng)建 list 文件夾，并在文件夾下創(chuàng)建 index.js、index.swan、index.css、index.json 頁(yè)面文件)。

頁(yè)面中引用動(dòng)態(tài)庫(kù)組件的方式是：在頁(yè)面的 json 配置的 usingSwanComponents 字段中聲明組件引用。

JSON

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "評(píng)論列表",
  
  
   "usingSwanComponents": {
  
  
   "comment-list": "dynamicLib://myDynamicLib/comment-list"
  
  
   }
  
  
  }

在頁(yè)面中放入列表組件，傳入必要的參數(shù)，組件詳情配置請(qǐng)參考 comment-list 評(píng)論列表組件。

SWAN
JS
CSS

 
 
 
  
  
  
  
  
   
  
  
   {{header.title}}
  
  
   
  
  
   
  
  
   
  
  
   {{header.author}}
  
  
   {{header.time}}
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   {{item.data}}
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   class="content-img"
  
  
   src="{{item.data.src}}"
  
  
   original-src="{{item.data.src}}"
  
  
   mode="widthFix"
  
  
   preview="true"
  
  
   lazy-load="true"/>
  
  
   
  
  
   
  
  
   
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   

  
  
   class="img">
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
  
  
  
   
  
  
   

  
  
   comment-param="{{commentParam}}"
  
  
   detail-path="{{detailPath}}"
  
  
   toolbar-config="{{toolbarConfig}}"
  
  
   bindclickcomment="clickComment">


 
 
 
  
  
  Page({
  
  
   data: {
  
  
   commentParam: {},
  
  
   header: {
  
  
   title: '心疼！中國(guó)自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽',
  
  
   avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
  
  
   author: '百度智能小程序',
  
  
   time: '2020年04月14日'
  
  
   },
  
  
   content: {
  
  
   items: [
  
  
   {
  
  
   type: 'text',
  
  
   data: '測(cè)試文字'
  
  
   }
  
  
   ]
  
  
   },
  
  
   detailPath: '/pages/detail/index?params1=abd',
  
  
   // 底部互動(dòng) bar 的配置
  
  
   toolbarConfig: {
  
  
   // 若 moduleList 中配置有 share 模塊，默認(rèn)是有，則該屬性為必填，title 必傳
  
  
   share: {
  
  
   title: '心疼！中國(guó)自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽'
  
  
   }
  
  
   }
  
  
   },
  
  
  
  
  
   onLoad(query) {
  
  
   this.setData({
  
  
   commentParam: {
  
  
   snid: '10070000311753961',
  
  
   path: '/pages/comment/index?snid=test_snid57',
  
  
   title: '測(cè)試文章標(biāo)題',
  
  
   content: '測(cè)試文章內(nèi)容',
  
  
   images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
  
  
   }
  
  
   });
  
  
   },
  
  
  
  
  
   onReady() {
  
  
   // 用于實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)
  
  
   requireDynamicLib('myDynamicLib').listenEvent();
  
  
   },
  
  
  
  
  
   clickComment(e) {
  
  
   }
  
  
  });
 
 
 
 
 
 
  
  
  .article-header {
  
  
   padding: 0 17px;
  
  
  }
  
  
  
  
  
  .article-header .title {
  
  
   display: block;
  
  
   font-size: 24px;
  
  
   line-height: 1.5;
  
  
   font-weight: 700;
  
  
  }
  
  
  
  
  
  .article-header .source {
  
  
   margin-top: 24px;
  
  
   display: flex;
  
  
   align-items: flex-start;
  
  
  }
  
  
  
  
  
  .article-header .source image {
  
  
   width: 35px;
  
  
   height: 35px;
  
  
   border-radius: 100%;
  
  
   margin-right: 8px;
  
  
   background-color: #eef1f4;
  
  
   background-size: 16px 16px;
  
  
   background-repeat: no-repeat;
  
  
   background-position: center center;
  
  
   background-image: url(../common/assets/logo-default.png);
  
  
  }
  
  
  
  
  
  .article-header .info {
  
  
   display: flex;
  
  
   flex-direction: column;
  
  
   justify-content: center;
  
  
   height: 35px;
  
  
  }
  
  
  
  
  
  .article-header .info .author {
  
  
   font-size: 16px;
  
  
   line-height: 1;
  
  
   display: block;
  
  
   color: #000;
  
  
   margin-bottom: 7px;
  
  
  }
  
  
  
  
  
  .article-header .info .time {
  
  
   display: block;
  
  
   color: #999;
  
  
   font-size: 12px;
  
  
   line-height: 1;
  
  
  }
  
  
  
  
  
  .article-content {
  
  
   color: #000;
  
  
   font-size: 19px;
  
  
   line-height: 1.58;
  
  
   letter-spacing: 2.84;
  
  
   margin-bottom: 30px;
  
  
  }
  
  
  
  
  
  .article-content .content-img {
  
  
   width: 100%;
  
  
   margin-top: 30px;
  
  
   vertical-align: bottom;
  
  
   background-color: #eef1f4;
  
  
   background-size: 32px 32px;
  
  
   background-repeat: no-repeat;
  
  
   background-position: center center;
  
  
   background-image: url(../common/assets/logo-default.png);
  
  
  }
  
  
  
  
  
  .article-content .content-p {
  
  
   margin: 24.5px 17px -5.5px 17px;
  
  
   text-align: justify;
  
  
   word-break: break-all;
  
  
  }
 
 
 
3.創(chuàng)建一個(gè)評(píng)論詳情頁(yè)面，并在頁(yè)面中聲明引用 comment-detail 組件
動(dòng)態(tài)庫(kù)中的組件與其他自定義組件類似，都需要在 page 中使用。所以首先需要?jiǎng)?chuàng)建一個(gè) page，page 路徑可自定義，推薦路徑為 pages/detail/index（即在小程序頁(yè)面目錄 pages 下創(chuàng)建 detail 文件夾，并在文件夾下創(chuàng)建 index.js、index.swan、index.css、index.json 頁(yè)面文件)。
頁(yè)面中引用動(dòng)態(tài)庫(kù)組件的方式是：在頁(yè)面的 json 配置的 usingSwanComponents 字段中聲明組件引用。

JSON

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "評(píng)論詳情",
  
  
   "usingSwanComponents": {
  
  
   "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
  
  
   }
  
  
  }
 
 
 
在頁(yè)面中放入詳情組件，傳入必要的參數(shù)，組件詳情配置請(qǐng)參考 comment-detail 評(píng)論詳情組件。

SWAN
JS

 
 
 
  
  
  

  
  
   comment-param="{{commentParam}}"
  
  
   srid="{{srid}}"
  
  
   need-like-btn="{{true}}"
  
  
   binddelete="detailDelete">
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   srid: '',
  
  
   commentParam: {}
  
  
   },
  
  
   onLoad(options) {
  
  
   if (options) {
  
  
   this.setData({
  
  
   srid: options.srid
  
  
   });
  
  
   }
  
  
  
  
  
   const param = getApp().globalData.commentParam;
  
  
  
  
  
   if (param && Object.keys(param).length) {
  
  
   this.setData({
  
  
   'commentParam': param
  
  
   });
  
  
   }
  
  
   else {
  
  
   this.setData({
  
  
   commentParam: {
  
  
   snid: '10070000311753961',
  
  
   path: '/pages/comment/index?snid=test_snid57',
  
  
   title: '測(cè)試文章標(biāo)題'
  
  
   }
  
  
   });
  
  
   }
  
  
   }
  
  
  });
 
 
 
圖片示例
評(píng)論列表支持折疊

對(duì)于部分開發(fā)者，在評(píng)論列表下方希望放入廣告等推薦區(qū)域，故評(píng)論列表支持折疊使用。
使用方式
1.創(chuàng)建一個(gè)帶評(píng)論功能的頁(yè)面，并在頁(yè)面中聲明引用 comment-list 組件
在頁(yè)面中放入列表組件，傳入必要的可折疊參數(shù)，組件詳情配置請(qǐng)參考 comment-list 評(píng)論列表組件。

SWAN
JS
JSON
CSS

 
 
 
  
  
  
  
  
   
  
  
   {{header.title}}
  
  
   
  
  
   
  
  
   
  
  
   {{header.author}}
  
  
   {{header.time}}
  
  
   
  
  
   
  
  
   
  
  
  
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   {{item.data}}
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   class="content-img"
  
  
   src="{{item.data.src}}"
  
  
   original-src="{{item.data.src}}"
  
  
   mode="widthFix"
  
  
   preview="true"
  
  
   lazy-load="true"/>
  
  
   
  
  
   
  
  
   
  
  
  
  
  
   
  
  
   

  
  
   comment-param="{{commentParam}}"
  
  
   detail-path="{{detailPath}}"
  
  
   is-folded="{{true}}"
  
  
   fold-num="{{foldNum}}"
  
  
   toolbar-config="{{toolbarConfig}}"
  
  
   view-more-path="{{viewMorePath}}"
  
  
   bindclickcomment="clickComment"
  
  
   bindviewmore="viewMore">
  
  
   
  
  
   
  
  
  
  
  
   
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   

  
  
   class="img">
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   歡迎使用智能小程序動(dòng)態(tài)庫(kù)
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   commentParam: {},
  
  
   header: {
  
  
   title: '心疼！中國(guó)自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽',
  
  
   avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
  
  
   author: '百度智能小程序',
  
  
   time: '2020年04月14日'
  
  
   },
  
  
   content: {
  
  
   items: [
  
  
   {
  
  
   type: 'image',
  
  
   data: {
  
  
   src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
  
  
   }
  
  
   },
  
  
   {
  
  
   type: 'text',
  
  
   data: '測(cè)試文字'
  
  
   }
  
  
   ]
  
  
   },
  
  
   // 評(píng)論詳情頁(yè)面路徑
  
  
   detailPath: '/pages/detail/index?params1=abd',
  
  
   // 全部評(píng)論頁(yè)面路徑
  
  
   viewMorePath: '/pages/all-list/index',
  
  
   // 折疊展示最大評(píng)論條數(shù)
  
  
   foldNum: 5,
  
  
   // 底部互動(dòng) bar 的配置
  
  
   toolbarConfig: {
  
  
   // 若 moduleList 中配置有 share 模塊，默認(rèn)是有，則該屬性為必填，title 必傳
  
  
   share: {
  
  
   title: '心疼！中國(guó)自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽'
  
  
   }
  
  
   }
  
  
   },
  
  
  
  
  
   onLoad(query) {
  
  
   this.setData({
  
  
   commentParam: {
  
  
   snid: '10070000311753961',
  
  
   path: '/pages/comment/index?snid=test_snid57',
  
  
   title: '測(cè)試文章標(biāo)題',
  
  
   content: '測(cè)試文章內(nèi)容',
  
  
   images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
  
  
   }
  
  
   });
  
  
   },
  
  
  
  
  
   onReady() {
  
  
   // 用于實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)
  
  
   requireDynamicLib('myDynamicLib').listenEvent();
  
  
   },
  
  
   clickComment(e) {
  
  
   },
  
  
  
  
  
   viewMore() {
  
  
   swan.showToast({
  
  
   title: 'click success'
  
  
   });
  
  
   }
  
  
  });
 
 
 
 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "折疊列表頁(yè)",
  
  
   "usingSwanComponents": {
  
  
   "comment-list": "dynamicLib://myDynamicLib/comment-list"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  .article-header {
  
  
   padding: 0 39.8rpx;
  
  
  }
  
  
  
  
  
  .article-header .title {
  
  
   display: block;
  
  
   font-size: 56rpx;
  
  
   line-height: 1.5;
  
  
   font-weight: 700;
  
  
  }
  
  
  
  
  
  .article-header .source {
  
  
   margin-top: 56rpx;
  
  
   display: flex;
  
  
   align-items: flex-start;
  
  
  }
  
  
  
  
  
  .article-header .source image {
  
  
   width: 82rpx;
  
  
   height: 82rpx;
  
  
   border-radius: 100%;
  
  
   margin-right: 18.7rpx;
  
  
   background-color: #eef1f4;
  
  
   background-size: 37.4rpx 37.4rpx;
  
  
   background-repeat: no-repeat;
  
  
   background-position: center center;
  
  
   background-image: url(../common/assets/logo-default.png);
  
  
  }
  
  
  
  
  
  .article-header .info {
  
  
   display: flex;
  
  
   flex-direction: column;
  
  
   justify-content: center;
  
  
   height: 82rpx;
  
  
  }
  
  
  
  
  
  .article-header .info .author {
  
  
   font-size: 37.4rpx;
  
  
   line-height: 1;
  
  
   display: block;
  
  
   color: #000;
  
  
   margin-bottom: 16.4rpx;
  
  
  }
  
  
  
  
  
  .article-header .info .time {
  
  
   display: block;
  
  
   color: #999;
  
  
   font-size: 28rpx;
  
  
   line-height: 1;
  
  
  }
  
  
  
  
  
  .article-content {
  
  
   color: #000;
  
  
   font-size: 44.5rpx;
  
  
   line-height: 1.58;
  
  
   letter-spacing: 2.84;
  
  
   margin-bottom: 70.2rpx;
  
  
  }
  
  
  
  
  
  .article-content .content-img {
  
  
   width: 100%;
  
  
   margin-top: 70.2rpx;
  
  
   vertical-align: bottom;
  
  
   background-color: #eef1f4;
  
  
   background-size: 74.9rpx 74.9rpx;
  
  
   background-repeat: no-repeat;
  
  
   background-position: center center;
  
  
   background-image: url(../common/assets/logo-default.png);
  
  
  }
  
  
  
  
  
  .article-content .content-p {
  
  
   margin: 57.3rpx 39.8rpx -12.9rpx 39.8rpx;
  
  
   text-align: justify;
  
  
   word-break: break-all;
  
  
  }
  
  
  
  
  
  .list-after {
  
  
   padding: 30rpx 18rpx 90rpx;
  
  
  }
  
  
  
  
  
  .comment-list-folded-bottom-margin {
  
  
   height: 14.4rpx;
  
  
   background-color: #f5f5f5;
  
  
  }
 
 
 
2.創(chuàng)建一個(gè)展示全部評(píng)論的頁(yè)面，并在頁(yè)面中聲明引用 comment-list 組件
我們建議全部評(píng)論的頁(yè)面，互動(dòng) bar 僅保留評(píng)論發(fā)布。組件配置請(qǐng)參考 comment-list 評(píng)論列表組件。

SWAN
JS
JSON

 
 
 
  
  
  

  
  
   comment-param="{{commentParam}}"
  
  
   detail-path="{{detailPath}}"
  
  
   toolbar-config="{{toolbarConfig}}"
  
  
   bindclickcomment="clickComment">
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   commentParam: {},
  
  
   toolbarConfig: {
  
  
   moduleList: []
  
  
   },
  
  
   detailPath: '/pages/detail/index?params1=abd'
  
  
   },
  
  
  
  
  
   onInit() {
  
  
   this.isOnInitCalled = true;
  
  
   this.init();
  
  
   },
  
  
  
  
  
   onLoad() {
  
  
   // 兼容不支持 onInit 的版本
  
  
   if (!this.isOnInitCalled) {
  
  
   this.init();
  
  
   }
  
  
   },
  
  
  
  
  
   init() {
  
  
   const commentParam = getApp().globalData.commentParam;
  
  
   if (commentParam && Object.keys(commentParam).length) {
  
  
   this.setData({
  
  
   commentParam
  
  
   });
  
  
   }
  
  
   else {
  
  
   this.setData({
  
  
   commentParam: {
  
  
   snid: '10070000311753961',
  
  
   path: '/pages/comment/index?snid=test_snid57',
  
  
   title: '測(cè)試文章標(biāo)題'
  
  
   }
  
  
   });
  
  
  
  
  
   }
  
  
   },
  
  
  
  
  
   onReady() {
  
  
   // 用于實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)
  
  
   requireDynamicLib('myDynamicLib').listenEvent();
  
  
   },
  
  
   clickComment(e) {
  
  
   }
  
  
  });
 
 
 
 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "全部評(píng)論",
  
  
   "usingSwanComponents": {
  
  
   "comment-list": "dynamicLib://myDynamicLib/comment-list"
  
  
   }
  
  
  }
 
 
 
3.創(chuàng)建一個(gè)評(píng)論詳情頁(yè)面，并在頁(yè)面中聲明引用 comment-detail 組件
Bug & Tip

Tip：使用 Mars 等第三方框架開發(fā)小程序時(shí)，可能存在 setData 的異步延時(shí)，如在評(píng)論詳情頁(yè) srid 作為單獨(dú)參數(shù)傳入沒有生效，可作為 commentParam 中的字段傳入。
Tip：原有一站式互動(dòng)組件 smart-sc 因性能問題，對(duì)用戶流量產(chǎn)生影響，為避免影響線上已接入用戶，本次新的一站式互動(dòng)組件采用新的動(dòng)態(tài)庫(kù)。
Tip：原有一站式互動(dòng)組件的部分 bug ，如點(diǎn)贊狀態(tài)失效等，已在新一站式組件中修復(fù)。
Tip：新的一站式互動(dòng)組件，通用性更強(qiáng)，除了頁(yè)面級(jí)別，也支持浮層的使用。
Tip：在 onLoad 和 onReady 生命周期內(nèi)引入requireDynamicLib('myDynamicLib').listenEvent()來實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。
                                                

                                                網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：one-stop-interaction一站式互動(dòng)組件                                                

                                                文章鏈接：http://www.5511xx.com/article/cohisje.html


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                SpringMVC框架的高級(jí)配置（下）
                                                            

                                                                分享一下awk命令使用實(shí)例
                                                            

                                                                Nginx安全策略：使用安全的shell（SSH）網(wǎng)關(guān)進(jìn)行服務(wù)器管理
                                                            

                                                                阿里云郵企業(yè)郵箱免費(fèi)版
                                                            

                                                                90%程序員面試時(shí)都沒有完全答對(duì)Cookie和Session的區(qū)別！你呢？