one-stop-interaction 一站式互動組件

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

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

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

使用方式

1.在項目中聲明引用 swan-interaction 動態(tài)庫

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

JSON

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

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

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

JSON

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "評論列表",
  
  
   "usingSwanComponents": {
  
  
   "comment-list": "dynamicLib://myDynamicLib/comment-list"
  
  
   }
  
  
  }

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

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"/>
  
  
   
  
  
   
  
  
   
  
  
   歡迎使用智能小程序動態(tài)庫
  
  
   歡迎使用智能小程序動態(tài)庫
  
  
   歡迎使用智能小程序動態(tài)庫
  
  
   

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

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


 
 
 
  
  
  Page({
  
  
   data: {
  
  
   commentParam: {},
  
  
   header: {
  
  
   title: '心疼！中國自行車女將卷入摔車事故 腹部扎入3厘米木刺堅持完賽',
  
  
   avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
  
  
   author: '百度智能小程序',
  
  
   time: '2020年04月14日'
  
  
   },
  
  
   content: {
  
  
   items: [
  
  
   {
  
  
   type: 'text',
  
  
   data: '測試文字'
  
  
   }
  
  
   ]
  
  
   },
  
  
   detailPath: '/pages/detail/index?params1=abd',
  
  
   // 底部互動 bar 的配置
  
  
   toolbarConfig: {
  
  
   // 若 moduleList 中配置有 share 模塊，默認(rèn)是有，則該屬性為必填，title 必傳
  
  
   share: {
  
  
   title: '心疼！中國自行車女將卷入摔車事故 腹部扎入3厘米木刺堅持完賽'
  
  
   }
  
  
   }
  
  
   },
  
  
  
  
  
   onLoad(query) {
  
  
   this.setData({
  
  
   commentParam: {
  
  
   snid: '10070000311753961',
  
  
   path: '/pages/comment/index?snid=test_snid57',
  
  
   title: '測試文章標(biāo)題',
  
  
   content: '測試文章內(nèi)容',
  
  
   images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
  
  
   }
  
  
   });
  
  
   },
  
  
  
  
  
   onReady() {
  
  
   // 用于實現(xiàn)頁面間的跳轉(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)建一個評論詳情頁面，并在頁面中聲明引用 comment-detail 組件
動態(tài)庫中的組件與其他自定義組件類似，都需要在 page 中使用。所以首先需要創(chuàng)建一個 page，page 路徑可自定義，推薦路徑為 pages/detail/index（即在小程序頁面目錄 pages 下創(chuàng)建 detail 文件夾，并在文件夾下創(chuàng)建 index.js、index.swan、index.css、index.json 頁面文件)。
頁面中引用動態(tài)庫組件的方式是：在頁面的 json 配置的 usingSwanComponents 字段中聲明組件引用。

JSON

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

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: '測試文章標(biāo)題'
  
  
   }
  
  
   });
  
  
   }
  
  
   }
  
  
  });
 
 
 
圖片示例
評論列表支持折疊

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

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">
  
  
   
  
  
   
  
  
  
  
  
   
  
  
   歡迎使用智能小程序動態(tài)庫
  
  
   歡迎使用智能小程序動態(tài)庫
  
  
   歡迎使用智能小程序動態(tài)庫
  
  
   

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

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   commentParam: {},
  
  
   header: {
  
  
   title: '心疼！中國自行車女將卷入摔車事故 腹部扎入3厘米木刺堅持完賽',
  
  
   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: '測試文字'
  
  
   }
  
  
   ]
  
  
   },
  
  
   // 評論詳情頁面路徑
  
  
   detailPath: '/pages/detail/index?params1=abd',
  
  
   // 全部評論頁面路徑
  
  
   viewMorePath: '/pages/all-list/index',
  
  
   // 折疊展示最大評論條數(shù)
  
  
   foldNum: 5,
  
  
   // 底部互動 bar 的配置
  
  
   toolbarConfig: {
  
  
   // 若 moduleList 中配置有 share 模塊，默認(rèn)是有，則該屬性為必填，title 必傳
  
  
   share: {
  
  
   title: '心疼！中國自行車女將卷入摔車事故 腹部扎入3厘米木刺堅持完賽'
  
  
   }
  
  
   }
  
  
   },
  
  
  
  
  
   onLoad(query) {
  
  
   this.setData({
  
  
   commentParam: {
  
  
   snid: '10070000311753961',
  
  
   path: '/pages/comment/index?snid=test_snid57',
  
  
   title: '測試文章標(biāo)題',
  
  
   content: '測試文章內(nèi)容',
  
  
   images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
  
  
   }
  
  
   });
  
  
   },
  
  
  
  
  
   onReady() {
  
  
   // 用于實現(xiàn)頁面間的跳轉(zhuǎn)
  
  
   requireDynamicLib('myDynamicLib').listenEvent();
  
  
   },
  
  
   clickComment(e) {
  
  
   },
  
  
  
  
  
   viewMore() {
  
  
   swan.showToast({
  
  
   title: 'click success'
  
  
   });
  
  
   }
  
  
  });
 
 
 
 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "折疊列表頁",
  
  
   "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)建一個展示全部評論的頁面，并在頁面中聲明引用 comment-list 組件
我們建議全部評論的頁面，互動 bar 僅保留評論發(fā)布。組件配置請參考 comment-list 評論列表組件。

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: '測試文章標(biāo)題'
  
  
   }
  
  
   });
  
  
  
  
  
   }
  
  
   },
  
  
  
  
  
   onReady() {
  
  
   // 用于實現(xiàn)頁面間的跳轉(zhuǎn)
  
  
   requireDynamicLib('myDynamicLib').listenEvent();
  
  
   },
  
  
   clickComment(e) {
  
  
   }
  
  
  });
 
 
 
 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "全部評論",
  
  
   "usingSwanComponents": {
  
  
   "comment-list": "dynamicLib://myDynamicLib/comment-list"
  
  
   }
  
  
  }
 
 
 
3.創(chuàng)建一個評論詳情頁面，并在頁面中聲明引用 comment-detail 組件
Bug & Tip

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

                                                當(dāng)前名稱：創(chuàng)新互聯(lián)百度小程序教程：one-stop-interaction一站式互動組件                                                

                                                文章地址：http://m.fisionsoft.com.cn/article/cohisje.html


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                python如何分發(fā)依賴包
                                                            

                                                                如何將電腦備份到云服務(wù)器里
                                                            

                                                                維護(hù)Mssql歷史表的實現(xiàn)及維護(hù)（Mssql歷史表）
                                                            

                                                                利用服務(wù)器IP創(chuàng)建網(wǎng)址，快速打開網(wǎng)站(服務(wù)器IP做網(wǎng)址打開網(wǎng)站)
                                                            

                                                                網(wǎng)頁設(shè)計元素有哪些