百度智能小程序 点赞

like 点赞

解释： 通过点赞组件，用户可以对文章内容或者评论内容进行点赞，被点赞的用户可以收到消息通知。更多点赞设计指引，详见 如何提升小程序互动体验 。

属性说明

like-param 点赞服务参数说明

snid 和 srid 分别是文章内容和评论内容的唯一标识，由开发者创建和维护。当对文章内容进行点赞时，只需要填写 snid；当对文章下某一评论进行点赞时，需要填写 snid 和 spid。

示例 

在开发者工具中打开

图片示例

使用方式

方式一：npm

# 进入项目根目录, 路径以./projectRoot为例
cd ./projectRoot
# 未安装过点赞组件
npm install @smt-ui/content-component
# 以前安装过点赞组件
npm update

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

方式二：动态库

在 app.json 中引入内容服务组件动态库

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

在页面配置 json 文件中，以动态库方式引入

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

代码示例

<custom chineseName="点赞" engName="like"></custom>
<view class="container">
    <view class="card-area">
        <view class="top-description border-bottom">图标按钮样式</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">动效组合样式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">无动效</view>
            </view>
            <view class="button-item">
                <smt-like
                    like-param="{{likeParam}}"
                    bind:success="clicksucc"
                    bind:error="error">
                </smt-like>
                <view class="button-tip">轻动效</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">强动效</view>
            </view>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">动效组合样式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">无动效</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">轻动效</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">强动效</view>
            </view>
        </view>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">点击提示反馈</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: '我是文章标题',
            path: currentUri + '&snid=' + snid
        });
    },
    error() {
        // 处理未登录
        swan.login({
            success: res => {
                console.log('login success', res);
            },
            fail: err => {
                console.log('login fail', err);
            }
        });
    }
});

Bug&Tip

• 只有登录用户才能进行对文章内容或者评论内容的点赞
• 只有小程序使用点赞组件后，被点赞的用户才能收到消息通知
• like-param 点赞服务参数中，snid 和 path 是一一对应，能保证点赞服务的可用性