后浪云|香港服务器

后浪云百度小程序教程：like 点赞

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

    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. 
  
  
  
    2. cd ./projectRoot
      3. 
  
  
  
    3. # 未安装过点赞组件
      4. 
  
  
  
    4. npm install @smt-ui/content-component
      5. 
  
  
  
    5. # 以前安装过点赞组件
      6. 
  
  
  
    6. npm update
      7.
    • JSON
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "usingComponents": {
      3. 
  
  
  
    3.  "smt-like": "@smt-ui/content-component/src/like"
      4. 
  
  
  
    4.  }
      5. 
  
  
  
    5. }
      6.

    方式二：动态库引入

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

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

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

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

    代码示例

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

    Bug & Tip

    • Tip：只有登录用户才能进行对文章内容或者评论内容的点赞。
    • Tip：只有小程序使用点赞组件后，被点赞的用户才能收到消息通知。
    • Tip：like-param 点赞服务参数中，snid 和 path 是一一对应，能保证点赞服务的可用性。
    版权声明：
    作者：后浪云
    链接：https://idc.net/help/186081/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    相关推荐
    后浪云小程序云教程：云开发 云开发能力
    后浪云Knockout教程：第十章：更多信息（完结篇）
    后浪云Flutter教程：Flutter 布局方法
    后浪云小程序云教程：云开发 HTTP处理
    后浪云小程序云教程：云开发 CloudBase CLI
    后浪云UNI-APP教程：其他项目转 uni-app
    后浪云小程序云教程：云开发 链接与图片
    后浪云SDK教程：第九章 Manifest文件
    后浪云React教程：在设备上运行(Android)
    后浪云百度小程序教程：grid 宫格
    后浪云百度小程序教程：CanvasContext.setMiterLimit
    后浪云小程序教程：微信小程序API 视频解码器·VideoDecoder实例
    后浪云小程序教程：微信小程序 WeUI·导航组件
    后浪云百度小程序教程：CanvasContext.lineTo
    后浪云百度小程序教程：二维码短链
    后浪云小程序教程：微信小程序云开发 API云函数
    友情链接：USA VPSVPS.DO
    Copyright © 2008 - 2026 IDC.Net 版权所有
    Internet Data Corporation | 网络数据集团（美国）