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

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

# 使用方式

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