甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

创新互联百度小程序教程：like点赞

  • 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
     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  图标按钮样式
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  class="custom-class"
      9. 
  
  
  
    9.  like-param="{{likeParam}}"
      10. 
  
  
  
    10.  bind:error="error"
      11. 
  
  
  
    11.  bind:success="clicksucc">
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  icon-type="heart"
      15. 
  
  
  
    15.  like-param="{{likeParam}}"
      16. 
  
  
  
    16.  bind:error="error">
      17. 
  
  
  
    17.  
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19.  
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  组合按钮样式
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23.  
      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.  
      30. 
  
  
  
    30.  
      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.  
      39. 
  
  
  
    39.  
      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.  
      47. 
  
  
  
    47.  
      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.  
      55. 
  
  
  
    55.  
      56. 
  
  
  
    56.  
      57. 
  
  
  
    57.  
      58. 
  
  
  
    58.  动效组合样式1
      59. 
  
  
  
    59.  
      60. 
  
  
  
    60.  
      61. 
  
  
  
    61.  
      62. 
  
  
  
    62.  animation-type="{{0}}"
      63. 
  
  
  
    63.  like-param="{{likeParam}}"
      64. 
  
  
  
    64.  bind:success="clicksucc"
      65. 
  
  
  
    65.  bind:error="error">
      66. 
  
  
  
    66.  
      67. 
  
  
  
    67.  无动效
      68. 
  
  
  
    68.  
      69. 
  
  
  
    69.  
      70. 
  
  
  
    70.  
      71. 
  
  
  
    71.  like-param="{{likeParam}}"
      72. 
  
  
  
    72.  bind:success="clicksucc"
      73. 
  
  
  
    73.  bind:error="error">
      74. 
  
  
  
    74.  
      75. 
  
  
  
    75.  轻动效
      76. 
  
  
  
    76.  
      77. 
  
  
  
    77.  
      78. 
  
  
  
    78.  
      79. 
  
  
  
    79.  animation-type="{{2}}"
      80. 
  
  
  
    80.  like-param="{{likeParam}}"
      81. 
  
  
  
    81.  bind:success="clicksucc"
      82. 
  
  
  
    82.  bind:error="error">
      83. 
  
  
  
    83.  
      84. 
  
  
  
    84.  强动效
      85. 
  
  
  
    85.  
      86. 
  
  
  
    86.  
      87. 
  
  
  
    87.  
      88. 
  
  
  
    88.  
      89. 
  
  
  
    89.  动效组合样式2
      90. 
  
  
  
    90.  
      91. 
  
  
  
    91.  
      92. 
  
  
  
    92.  
      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.  
      99. 
  
  
  
    99.  无动效
      100. 
  
  
  
    100.  
      101. 
  
  
  
    101.  
      102. 
  
  
  
    102.  
      103. 
  
  
  
    103.  icon-type="heart"
      104. 
  
  
  
    104.  like-param="{{likeParam}}"
      105. 
  
  
  
    105.  bind:success="clicksucc"
      106. 
  
  
  
    106.  bind:error="error">
      107. 
  
  
  
    107.  
      108. 
  
  
  
    108.  轻动效
      109. 
  
  
  
    109.  
      110. 
  
  
  
    110.  
      111. 
  
  
  
    111.  
      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.  
      118. 
  
  
  
    118.  强动效
      119. 
  
  
  
    119.  
      120. 
  
  
  
    120.  
      121. 
  
  
  
    121.  
      122. 
  
  
  
    122.  
      123. 
  
  
  
    123.  点击提示反馈
      124. 
  
  
  
    124.  
      125. 
  
  
  
    125.  
      126. 
  
  
  
    126.  is-show-toast="{{true}}"
      127. 
  
  
  
    127.  like-param="{{likeParam}}"
      128. 
  
  
  
    128.  bind:success="clicksucc"
      129. 
  
  
  
    129.  bind:error="error">
      130. 
  
  
  
    130.  
      131. 
  
  
  
    131.  
      132. 
  
  
  
    132.  
      133. 
  
  
  
    133.  
      134. 
  
  
  
      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 是一一对应，能保证点赞服务的可用性。

    分享标题：创新互联百度小程序教程：like点赞
    浏览路径：https://chengdu.cdxwcx.cn/article/djdiipc.html

    其他资讯