like 点赞

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

属性说明

属性名类型必填默认值说明
is-likedBoolean否false是否已被点赞
modeString否icon按钮模式。icon：表示仅有图标；mixture：表示图标文字结合
icon-typeString否hand图标类型。hand：表示手形；heart：表示心形
styleString否none仅在 mode 为 mixture 时可配置。none：无边框；border：有边框
like-textString否赞点赞按钮上的文案。默认为赞，仅在 mode 属性值为’mixture’时有效
like-numNumber否0点赞数量
like-typeNumber否0被点赞的对象类型。0：表示对文章内容进行点赞；1：表示对评论内容进行点赞
animation-typeNumber否1点赞动效形式。0：无动效；1：轻动效；2：强动效
is-show-toastBoolean否false点赞后是否弹出 toast 提示
toast-textArray否[‘已点赞’, ‘已取消’]toast 文案，默认为已点赞、已取消
like-paramObject是点赞服务需要的必要参数
bind:errorEventHandle使用 npm 方式引入点赞组件时，点击按钮时在用户未登录状态下会触发此事件；使用动态库方式引入点赞组件时，点击按钮时在用户未登录状态下不会触发此事件
bind:successEventHandle点击点赞按钮，在点赞服务成功后将状态返回给使用组件者
bind:failEventHandle点击点赞按钮，在点赞服务失败后将状态返回给使用组件者

like-param 点赞服务参数说明

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

属性名类型必填默认值说明示例值
openidString是用户身份唯一标识，获取方法
snidString是被点赞的文章的 id，与 path 参数一一对应‘20200101’
spidString否被点赞的评论 id
titleString是文章标题
pathString是智能小程序内页链接，最长不能超过 194 字符。如该文章需要入信息流投放，需保证该参数与信息流投放提交的 path 一致，否则将会影响流量“path”:”/pages/index/index”

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

使用方式

方式一：npm 引入

  1. # 进入项目根目录, 路径以./projectRoot为例
  2. cd ./projectRoot
  3. # 未安装过点赞组件
  4. npm install @smt-ui/content-component
  5. # 以前安装过点赞组件
  6. npm update
  • JSON
  1. {
  2.     "usingComponents": {
  3.         "smt-like": "@smt-ui/content-component/src/like"
  4.     }
  5. }

方式二：动态库引入

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

  • JSON
  1. {
  2.     "dynamicLib": {
  3.         "myDynamicLib": {
  4.             "provider": "smart-sc"
  5.         }
  6.     }
  7. }

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

  • JSON
  1. {
  2.     "usingComponents": {
  3.         "smt-like": "dynamicLib://myDynamicLib/like"
  4.     }
  5. }

代码示例

  • SWAN
  • JS
  1. <custom chineseName="点赞" engName="like"></custom>
  3. <view class="container">
  4.     <view class="card-area">
  5.         <view class="top-description border-bottom">图标按钮样式</view>
  6.         <view class="button-box">
  7.             <smt-like
  8.                 class="custom-class"
  9.                 like-param="{{likeParam}}"
  10.                 bind:error="error"
  11.                 bind:success="clicksucc">
  12.             </smt-like>
  13.             <smt-like
  14.                 icon-type="heart"
  15.                 like-param="{{likeParam}}"
  16.                 bind:error="error">
  17.             </smt-like>
  18.         </view>
  19.     </view>
  20.     <view class="card-area">
  21.         <view class="top-description border-bottom">组合按钮样式</view>
  22.         <view class="button-box button-box-mixture">
  23.             <smt-like
  24.                 class="custom-class-mixture"
  25.                 mode="mixture"
  26.                 like-param="{{likeParam}}"
  27.                 like-text="{{likeText}}"
  28.                 bind:error="error">
  29.             </smt-like>
  30.             <smt-like
  31.                 class="custom-class-mixture"
  32.                 likeNum="12"
  33.                 mode="mixture"
  34.                 icon-type="heart"
  35.                 like-param="{{likeParam}}"
  36.                 like-text="{{likeText}}"
  37.                 bind:error="error">
  38.             </smt-like>
  39.             <smt-like
  40.                 class="custom-class-mixture"
  41.                 mode="mixture"
  42.                 style="border"
  43.                 like-param="{{likeParam}}"
  44.                 like-text="{{likeText}}"
  45.                 bind:error="error">
  46.             </smt-like>
  47.             <smt-like
  48.                 mode="mixture"
  49.                 likeNum="12"
  50.                 style="border"
  51.                 icon-type="heart"
  52.                 like-param="{{likeParam}}"
  53.                 bind:error="error">
  54.             </smt-like>
  55.         </view>
  56.     </view>
  57.     <view class="card-area">
  58.         <view class="top-description border-bottom">动效组合样式1</view>
  59.         <view class="button-box button-box-mix">
  60.             <view class="button-item">
  61.                 <smt-like
  62.                     animation-type="{{0}}"
  63.                     like-param="{{likeParam}}"
  64.                     bind:success="clicksucc"
  65.                     bind:error="error">
  66.                 </smt-like>
  67.                 <view class="button-tip">无动效</view>
  68.             </view>
  69.             <view class="button-item">
  70.                 <smt-like
  71.                     like-param="{{likeParam}}"
  72.                     bind:success="clicksucc"
  73.                     bind:error="error">
  74.                 </smt-like>
  75.                 <view class="button-tip">轻动效</view>
  76.             </view>
  77.             <view class="button-item">
  78.                 <smt-like
  79.                     animation-type="{{2}}"
  80.                     like-param="{{likeParam}}"
  81.                     bind:success="clicksucc"
  82.                     bind:error="error">
  83.                 </smt-like>
  84.                 <view class="button-tip">强动效</view>
  85.             </view>
  86.         </view>
  87.     </view>
  88.     <view class="card-area">
  89.         <view class="top-description border-bottom">动效组合样式2</view>
  90.         <view class="button-box button-box-mix">
  91.             <view class="button-item">
  92.                 <smt-like
  93.                     icon-type="heart"
  94.                     animation-type="{{0}}"
  95.                     like-param="{{likeParam}}"
  96.                     bind:success="clicksucc"
  97.                     bind:error="error">
  98.                 </smt-like>
  99.                 <view class="button-tip">无动效</view>
  100.             </view>
  101.             <view class="button-item">
  102.                 <smt-like
  103.                     icon-type="heart"
  104.                     like-param="{{likeParam}}"
  105.                     bind:success="clicksucc"
  106.                     bind:error="error">
  107.                 </smt-like>
  108.                 <view class="button-tip">轻动效</view>
  109.             </view>
  110.             <view class="button-item">
  111.                 <smt-like
  112.                     icon-type="heart"
  113.                     animation-type="{{2}}"
  114.                     like-param="{{likeParam}}"
  115.                     bind:success="clicksucc"
  116.                     bind:error="error">
  117.                 </smt-like>
  118.                 <view class="button-tip">强动效</view>
  119.             </view>
  120.         </view>
  121.     </view>
  122.     <view class="card-area">
  123.         <view class="top-description border-bottom">点击提示反馈</view>
  124.         <view class="button-box">
  125.             <smt-like
  126.                 is-show-toast="{{true}}"
  127.                 like-param="{{likeParam}}"
  128.                 bind:success="clicksucc"
  129.                 bind:error="error">
  130.             </smt-like>
  131.         </view>
  132.     </view>
  133.     <view class="space"></view>
  134. </view>
  1. Page({
  2.     data: {
  3.         likeParam: {}
  4.     },
  5.     onLoad() {
  6.         const pageStack = getCurrentPages();
  7.         const currentPage = pageStack[pageStack.length - 1];
  8.         const privateProperties = currentPage.privateProperties || {};
  9.         const currentUri = privateProperties.accessUri || currentPage.uri;
  10.         const snid = 'test_snid';
  11.         this.setData('likeParam', {
  12.             snid: snid,
  13.             spid: '' + Date.now(),
  14.             openid: 'mVMFstfXtsndgnRObr7BoP9hoL',
  15.             title: '我是文章标题',
  16.             path: currentUri + '&snid=' + snid
  17.         });
  18.     },
  19.     error() {
  20.         // 在使用 npm 方式引入点赞组件时，点击按钮时在用户未登录状态下会触发此事件，建议提前引导用户完成登录
  21.     }
  22. });

Bug & Tip

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