阅读(189) 赞(10)

百度智能小程序点赞

2020-08-11 17:41:59 更新

like 点赞

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

属性说明

属性名	类型	必填	默认值	说明
is-liked	Boolean	否	false	是否已被点赞
mode	String	否	icon	按钮模式：icon 表示仅有图标; mixture 表示图标文字结合
icon-type	String	否	hand	图标类型：hand 表示手形和 heart 表示心形
style	String	否	none	仅在 mode 为 mixture 时可配置, none：无边框；border：有边框
like-text	String	否	赞	点赞按钮上的文案，默认为赞，仅在 mode 属性值为’mixture’时有效
like-num	Number	否	0	点赞数量
like-type	Number	否	0	被点赞的对象类型，0 表示对文章内容进行点赞; 1 表示对评论内容进行点赞
animation-type	Number	否	1	点赞动效形式，0 无动效；1 轻动效；2 强动效
is-show-toast	Boolean	否	false	点赞后是否弹出 toast 提示
toast-text	Array	否	[‘已点赞’, ‘已取消’]	toast 文案，默认为已点赞、已取消
like-param	Object	是		点赞服务需要的必要参数
bind:error	EventHandle			点击按钮时在用户未登录状态下触发的事件
bind:success	EventHandle			点击点赞按钮，在点赞服务成功后将状态返回给使用组件者
bind:fail	EventHandle			点击点赞按钮，在点赞服务失败后将状态返回给使用组件者

like-param 点赞服务参数说明

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

属性名	类型	必填	说明
openid	String	是	用户身份唯一标识，获取方法
snid	String	是	被点赞的文章的 id，与 path 参数一一对应，例如值为’20200101’
spid	String	否	被点赞的评论 id
title	String	是	文章标题
path	String	是	文章页面地址，用于消息推送等流量入口跳转回访，与 snid 参数一一对应，例如/page/home/index?snid=20200101

示例

在开发者工具中打开

图片示例

使用方式

方式一：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 是一一对应，能保证点赞服务的可用性

← 百度智能小程序网页容器

百度智能小程序关注小程序组件 →

百度智能小程序 点赞