• like 點(diǎn)贊
  • 屬性說(shuō)明
    • like-param 點(diǎn)贊服務(wù)參數(shù)說(shuō)明
  • 示例
    • 使用方式
    • 代碼示例
  • Bug & Tip

like 點(diǎn)贊

解釋：通過(guò)點(diǎn)贊組件，用戶可以對(duì)文章內(nèi)容或者評(píng)論內(nèi)容進(jìn)行點(diǎn)贊，被點(diǎn)贊的用戶可以收到消息通知。更多點(diǎn)贊設(shè)計(jì)指引，詳見(jiàn)如何提升小程序互動(dòng)體驗(yàn)。

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出海淀免費(fèi)做網(wǎng)站回饋大家。

屬性說(shuō)明

like-param 點(diǎn)贊服務(wù)參數(shù)說(shuō)明

snid 和 spid 分別是文章內(nèi)容和評(píng)論內(nèi)容的唯一標(biāo)識(shí)，由開(kāi)發(fā)者創(chuàng)建和維護(hù)。當(dāng)對(duì)文章內(nèi)容進(jìn)行點(diǎn)贊時(shí)，只需要填寫 snid ；當(dāng)對(duì)文章下某一評(píng)論進(jìn)行點(diǎn)贊時(shí)，需要填寫 snid 和 spid 。

示例

跳轉(zhuǎn)編輯工具

在開(kāi)發(fā)者工具中打開(kāi)

在 WEB IDE 中打開(kāi)

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

使用方式

方式一：npm 引入

 
 
 

  
  
  
# 進(jìn)入項(xiàng)目根目錄, 路徑以./projectRoot為例
  
  
  
cd ./projectRoot
  
  
  
# 未安裝過(guò)點(diǎn)贊組件
  
  
  
npm install @smt-ui/content-component
  
  
  
# 以前安裝過(guò)點(diǎn)贊組件
  
  
  
npm update
 
 
 

• JSON

 
 
 

  
  
  
{
  
  
  
 "usingComponents": {
  
  
  
 "smt-like": "@smt-ui/content-component/src/like"
  
  
  
 }
  
  
  
}
 
 
 

方式二：動(dòng)態(tài)庫(kù)引入

在 app.json 中引入內(nèi)容服務(wù)組件動(dòng)態(tài)庫(kù)。

• JSON

 
 
 

  
  
  
{
  
  
  
 "dynamicLib": {
  
  
  
 "myDynamicLib": {
  
  
  
 "provider": "smart-sc"
  
  
  
 }
  
  
  
 }
  
  
  
}
 
 
 

在頁(yè)面配置 JSON 文件中，以動(dòng)態(tài)庫(kù)方式引入。

• JSON

 
 
 

  
  
  
{
  
  
  
 "usingComponents": {
  
  
  
 "smt-like": "dynamicLib://myDynamicLib/like"
  
  
  
 }
  
  
  
}
 
 
 

代碼示例

• SWAN
• JS

 
 
 

  
  
  

  
  
  

  
  
  

  
  
  
 
  
  
  
 圖標(biāo)按鈕樣式
  
  
  
 
  
  
  
 

  
  
  
 class="custom-class"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:error="error"
  
  
  
 bind:success="clicksucc">
  
  
  
 
  
  
  
 

  
  
  
 icon-type="heart"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 組合按鈕樣式
  
  
  
 
  
  
  
 

  
  
  
 class="custom-class-mixture"
  
  
  
 mode="mixture"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 like-text="{{likeText}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 

  
  
  
 class="custom-class-mixture"
  
  
  
 likeNum="12"
  
  
  
 mode="mixture"
  
  
  
 icon-type="heart"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 like-text="{{likeText}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 

  
  
  
 class="custom-class-mixture"
  
  
  
 mode="mixture"
  
  
  
 style="border"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 like-text="{{likeText}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 

  
  
  
 mode="mixture"
  
  
  
 likeNum="12"
  
  
  
 style="border"
  
  
  
 icon-type="heart"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 動(dòng)效組合樣式1
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 animation-type="{{0}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 無(wú)動(dòng)效
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 輕動(dòng)效
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 animation-type="{{2}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 強(qiáng)動(dòng)效
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 動(dòng)效組合樣式2
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 icon-type="heart"
  
  
  
 animation-type="{{0}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 無(wú)動(dòng)效
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 icon-type="heart"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 輕動(dòng)效
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 icon-type="heart"
  
  
  
 animation-type="{{2}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 強(qiáng)動(dòng)效
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 點(diǎn)擊提示反饋
  
  
  
 
  
  
  
 

  
  
  
 is-show-toast="{{true}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  

 
 
 

 
 
 

  
  
  
Page({
  
  
  
 data: {
  
  
  
 likeParam: {}
  
  
  
 },
  
  
  
 onLoad() {
  
  
  
 const pageStack = getCurrentPages();
  
  
  
 const currentPage = pageStack[pageStack.length - 1];
  
  
  
 const privateProperties = currentPage.privateProperties || {};
  
  
  
 const currentUri = privateProperties.accessUri || currentPage.uri;
  
  
  
 const snid = 'test_snid';
  
  
  
 this.setData('likeParam', {
  
  
  
 snid: snid,
  
  
  
 spid: '' + Date.now(),
  
  
  
 openid: 'mVMFstfXtsndgnRObr7BoP9hoL',
  
  
  
 title: '我是文章標(biāo)題',
  
  
  
 path: currentUri + '&snid=' + snid
  
  
  
 });
  
  
  
 },
  
  
  
 error() {
  
  
  
 // 在使用 npm 方式引入點(diǎn)贊組件時(shí)，點(diǎn)擊按鈕時(shí)在用戶未登錄狀態(tài)下會(huì)觸發(fā)此事件，建議提前引導(dǎo)用戶完成登錄
  
  
  
 }
  
  
  
});