百度智能小程序 點(diǎn)贊

like 點(diǎn)贊

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

屬性說明

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

snid 和 srid 分別是文章內(nèi)容和評(píng)論內(nèi)容的唯一標(biāo)識(shí)，由開發(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。

示例 

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

圖片示例

使用方式

方式一：npm

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

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

方式二：動(dòng)態(tài)庫

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

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

在頁面配置 json 文件中，以動(dòng)態(tài)庫方式引入

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

代碼示例

<custom chineseName="點(diǎn)贊" engName="like"></custom>
<view class="container">
    <view class="card-area">
        <view class="top-description border-bottom">圖標(biāo)按鈕樣式</view>
        <view class="button-box">
            <smt-like
                class="custom-class"
                like-param="{{likeParam}}"
                bind:error="error"
                bind:success="clicksucc">
            </smt-like>
            <smt-like
                icon-type="heart"
                like-param="{{likeParam}}"
                bind:error="error">
            </smt-like>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">組合按鈕樣式</view>
        <view class="button-box button-box-mixture">
            <smt-like
                class="custom-class-mixture"
                mode="mixture"
                like-param="{{likeParam}}"
                like-text="{{likeText}}"
                bind:error="error">
            </smt-like>
            <smt-like
                class="custom-class-mixture"
                likeNum="12"
                mode="mixture"
                icon-type="heart"
                like-param="{{likeParam}}"
                like-text="{{likeText}}"
                bind:error="error">
            </smt-like>
            <smt-like
                class="custom-class-mixture"
                mode="mixture"
                style="border"
                like-param="{{likeParam}}"
                like-text="{{likeText}}"
                bind:error="error">
            </smt-like>
            <smt-like
                mode="mixture"
                likeNum="12"
                style="border"
                icon-type="heart"
                like-param="{{likeParam}}"
                bind:error="error">
            </smt-like>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">動(dòng)效組合樣式1</view>
        <view class="button-box button-box-mix">
            <view class="button-item">
                <smt-like
                    animation-type="{{0}}"
                    like-param="{{likeParam}}"
                    bind:success="clicksucc"
                    bind:error="error">
                </smt-like>
                <view class="button-tip">無動(dòng)效</view>
            </view>
            <view class="button-item">
                <smt-like
                    like-param="{{likeParam}}"
                    bind:success="clicksucc"
                    bind:error="error">
                </smt-like>
                <view class="button-tip">輕動(dòng)效</view>
            </view>
            <view class="button-item">
                <smt-like
                    animation-type="{{2}}"
                    like-param="{{likeParam}}"
                    bind:success="clicksucc"
                    bind:error="error">
                </smt-like>
                <view class="button-tip">強(qiáng)動(dòng)效</view>
            </view>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">動(dòng)效組合樣式2</view>
        <view class="button-box button-box-mix">
            <view class="button-item">
                <smt-like
                    icon-type="heart"
                    animation-type="{{0}}"
                    like-param="{{likeParam}}"
                    bind:success="clicksucc"
                    bind:error="error">
                </smt-like>
                <view class="button-tip">無動(dòng)效</view>
            </view>
            <view class="button-item">
                <smt-like
                    icon-type="heart"
                    like-param="{{likeParam}}"
                    bind:success="clicksucc"
                    bind:error="error">
                </smt-like>
                <view class="button-tip">輕動(dòng)效</view>
            </view>
            <view class="button-item">
                <smt-like
                    icon-type="heart"
                    animation-type="{{2}}"
                    like-param="{{likeParam}}"
                    bind:success="clicksucc"
                    bind:error="error">
                </smt-like>
                <view class="button-tip">強(qiáng)動(dòng)效</view>
            </view>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">點(diǎn)擊提示反饋</view>
        <view class="button-box">
            <smt-like
                is-show-toast="{{true}}"
                like-param="{{likeParam}}"
                bind:success="clicksucc"
                bind:error="error">
            </smt-like>
        </view>
    </view>
    <view class="space"></view>
</view>

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() {
        // 處理未登錄
        swan.login({
            success: res => {
                console.log('login success', res);
            },
            fail: err => {
                console.log('login fail', err);
            }
        });
    }
});

Bug&Tip

• 只有登錄用戶才能進(jìn)行對(duì)文章內(nèi)容或者評(píng)論內(nèi)容的點(diǎn)贊
• 只有小程序使用點(diǎn)贊組件后，被點(diǎn)贊的用戶才能收到消息通知
• like-param 點(diǎn)贊服務(wù)參數(shù)中，snid 和 path 是一一對(duì)應(yīng)，能保證點(diǎn)贊服務(wù)的可用性