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

like 点赞

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

公司主营业务：成都做网站、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出海淀免费做网站回馈大家。

属性说明

like-param 点赞服务参数说明

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

示例

跳转编辑工具

在开发者工具中打开

在 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

 
 
 

  
  
  

  
  
  

  
  
  

  
  
  
 
  
  
  
 图标按钮样式
  
  
  
 
  
  
  
 

  
  
  
 class="custom-class"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:error="error"
  
  
  
 bind:success="clicksucc">
  
  
  
 
  
  
  
 

  
  
  
 icon-type="heart"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 组合按钮样式
  
  
  
 
  
  
  
 

  
  
  
 class="custom-class-mixture"
  
  
  
 mode="mixture"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 like-text="{{likeText}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 

  
  
  
 class="custom-class-mixture"
  
  
  
 likeNum="12"
  
  
  
 mode="mixture"
  
  
  
 icon-type="heart"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 like-text="{{likeText}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 

  
  
  
 class="custom-class-mixture"
  
  
  
 mode="mixture"
  
  
  
 style="border"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 like-text="{{likeText}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 

  
  
  
 mode="mixture"
  
  
  
 likeNum="12"
  
  
  
 style="border"
  
  
  
 icon-type="heart"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 动效组合样式1
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 animation-type="{{0}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 无动效
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 轻动效
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 animation-type="{{2}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 强动效
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 动效组合样式2
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 icon-type="heart"
  
  
  
 animation-type="{{0}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 无动效
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 icon-type="heart"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 轻动效
  
  
  
 
  
  
  
 
  
  
  
 

  
  
  
 icon-type="heart"
  
  
  
 animation-type="{{2}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 强动效
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 点击提示反馈
  
  
  
 
  
  
  
 

  
  
  
 is-show-toast="{{true}}"
  
  
  
 like-param="{{likeParam}}"
  
  
  
 bind:success="clicksucc"
  
  
  
 bind:error="error">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  

 
 
 

 
 
 

  
  
  
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 方式引入点赞组件时，点击按钮时在用户未登录状态下会触发此事件，建议提前引导用户完成登录
  
  
  
 }
  
  
  
});