百度智能小程序 点赞
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 是一一对应，能保证点赞服务的可用性