like 点赞
- 属性说明
  - like-param 点赞服务参数说明
- 示例
  - 使用方式
  - 代码示例
- Bug & Tip

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			使用 npm 方式引入点赞组件时，点击按钮时在用户未登录状态下会触发此事件；使用动态库方式引入点赞组件时，点击按钮时在用户未登录状态下不会触发此事件
bind:success	EventHandle			点击点赞按钮，在点赞服务成功后将状态返回给使用组件者
bind:fail	EventHandle			点击点赞按钮，在点赞服务失败后将状态返回给使用组件者

like-param 点赞服务参数说明

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

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

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

使用方式

方式一：npm 引入


 

  # 进入项目根目录, 路径以./projectRoot为例

  cd ./projectRoot

  # 未安装过点赞组件

  npm install @smt-ui/content-component

  # 以前安装过点赞组件

  npm update

JSON


 

  {

   "usingComponents": {

   "smt-like": "@smt-ui/content-component/src/like"

   }

  }

方式二：动态库引入

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

JSON


 

  {

   "dynamicLib": {

   "myDynamicLib": {

   "provider": "smart-sc"

   }

   }

  }

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

JSON


 

  {

   "usingComponents": {

   "smt-like": "dynamicLib://myDynamicLib/like"

   }

  }

代码示例

SWAN
JS


 

  <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() {

   // 在使用 npm 方式引入点赞组件时，点击按钮时在用户未登录状态下会触发此事件，建议提前引导用户完成登录

   }

  });

Bug & Tip

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

九八云百度小程序教程：like 点赞

like 点赞

属性说明

like-param 点赞服务参数说明

示例

使用方式

代码示例

Bug & Tip

相关推荐

攻防案列

热门文章