点赞组件

解释： 支持将用户对文章/评论的点赞行为同步给百度后端，实现对点赞对象(若此对象的文章/评论是在小程序内用评论组件生产)的消息通知。需要将点赞对象的文章/评论内容一起提交。

属性说明

属性名类型必填默认值说明
is-likedBoolean是false赞的状态
modeString否icon按钮模式，有两种选择icon: 仅有图标; mixture: 图标文字结合
icon-typeString否hand图标类型，提供两种，包括hand(默认)和heart
styleString否none仅在mode为mixture时可配置, none:无边框; border:有边框
like-textString否赞点赞按钮上的文案，默认为赞
like-numNumber否0点赞数
like-typeNumber否0点赞的对象类型，0:代表动态; 1:代表评论
like-paramObject是点赞服务需要的必要参数
like-param.openidString是用户身份唯一标识，获取方法点赞组件 - 图1
like-param.snidString是动态id,在开发者侧的唯一标识。当为空，默认开发者将数据托管在宿主，小程序侧创建动态后返回唯一标识给开发者。
like-param.sridString是评论id。不为空，表示对评论进行点赞。若小程序侧没有 srid 对应的标识，则认为此时对主题进行点赞。
like-param.appkeyString是小程序App Key，在小程序管理中心>设置>开发设置中获取
animation-typeNumber否1点赞动效形式，0:无动效；1:轻动效；2:强动效
is-show-toastBoolean否false点赞后的结果反馈是否弹出toast提示
toast-textArray否['已点赞', '已取消']toast文案，默认为已点赞、已取消
bind:errorEventHandle点击按钮时在用户未登录状态下触发的事件
bind:successEventHandle点击点赞按钮，在百度服务成功后将状态返回给使用组件者
bind:failEventHandle点击点赞按钮，在百度服务失败后将状态返回给使用组件者

示例

在开发者工具中预览效果

扫码体验

点赞组件 - 图2请使用百度APP扫码

图片示例

点赞组件 - 图3

点赞组件 - 图4

点赞组件 - 图5

代码示例

安装组件：

  1. npm install @smt-ui/content-component
  1. {
  2.     "navigationBarTitleText": "标题",
  3.     "usingComponents": {
  4.         "c-like": "@smt-ui/content-component/src/like"
  5.     }
  6. }
  1. <view>点赞：仅图标</view>
  2. <view class="like-demo">
  3.     <c-like like-param="{{likeParam}}"></c-like>
  4.     <c-like icon-type="heart" like-param="{{likeParam}}"></c-like>
  5.     <c-like animation-type="{{animationType}}" like-param="{{likeParam}}"></c-like>
  6.     <c-like icon-type="heart" animation-type="{{animationType}}" like-param="{{likeParam}}"></c-like>
  7.     <c-like animation-type="{{animationType2}}" is-show-toast="{{false}}" like-param="{{likeParam}}"></c-like>
  8.     <c-like
  9.         icon-type="heart"
  10.         is-show-toast="{{false}}"
  11.         animation-type="{{animationType2}}">
  12.     </c-like>
  13. </view>
  14. <view>点赞：带文字</view>
  15. <view class="like-demo"> 
  16.     <c-like
  17.         class="custom-class"
  18.         mode="mixture"
  19.         icon-type="heart"
  20.         like-param="{{likeParam}}"
  21.         like-text="{{likeText}}">
  22.     </c-like>
  23.     <c-like
  24.         class="custom-class"
  25.         mode="mixture"
  26.         like-param="{{likeParam}}"
  27.         like-text="{{likeText}}">
  28.     </c-like>
  29.     <c-like
  30.         class="custom-class"
  31.         mode="mixture"
  32.         icon-type="heart"
  33.         like-param="{{likeParam}}"
  34.         animation-type="{{animationType}}"
  35.         like-text="{{likeText}}">
  36.     </c-like>
  37.     <c-like
  38.         class="custom-class"
  39.         mode="mixture"
  40.         like-param="{{likeParam}}"
  41.         animation-type="{{animationType}}"
  42.         like-text="{{likeText}}">
  43.     </c-like>
  44.     <c-like
  45.         class="custom-class"
  46.         mode="mixture"
  47.         icon-type="heart"
  48.         like-param="{{likeParam}}"
  49.         animation-type="{{animationType2}}"
  50.         like-text="{{likeText}}">
  51.     </c-like>
  52.     <c-like
  53.         class="custom-class"
  54.         mode="mixture"
  55.         like-param="{{likeParam}}"
  56.         animation-type="{{animationType2}}"
  57.         like-text="{{likeText}}">
  58.     </c-like>
  59. </view>
  1. Page({
  2.     data: {
  3.         animationType: 2,
  4.         animationType2: 0,
  5.         likeParam: {
  6.             srid: 'fsds',
  7.             snid: '111',
  8.             appkey: 'wSfMyKIbrbNg7ogTFTcBuk1P8mgGTlB1',
  9.             openid: 'dasa'
  10.         }
  11.     }
  12. });
  1. .like-demo{
  2.     display: flex;
  3.     height: 80px;
  4.     align-items: center;
  5.     justify-content: space-around;
  6. }
  7. .like-demo .custom-class {
  8.     margin: 0 10px; 
  9. }