SlugTeam

# 组件

使用评论小程序插件提供的所有自定义组件，都需要在对应页面的 json 文件中声明：

{
    "usingComponents": {
        "slug-comment": "plugin://slug-comment/slug-comment"
    }
}
1
2
3
4
5

# <slug-comment> 评论核心

评论核心组件，用于在页面中挂载评论。

# 属性

# data

data 类型： Object

描述： 评论请求相关参数。

用法：

<!-- wxml -->
<slug-comment data="{{ comment }}"></slug-comment>
1
2
// js
Page({
  data: {
    comment: {
      gameid: 'slugcomment',
      module: 'dev',
      objid: 15307037,
      stime: 201807,
      title: '评论小程序插件',
      avatar: '……',
      nickname: '……',
      // session_id: '……', // 登录态
      // openid: '……', // openid
    },
  },

  onLoad() {
    wx.login({
      success: (result) => {
        this.setData({
          'comment.code': result.code, // 将临时登录凭证传递给评论小程序插件
        })
      },
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

若小程序本身已有登录态相关参数，则可直接传递登录态与 openid 代替临时登录凭证：

// js
Page({
  data: {
    comment: {
      gameid: 'slugcomment',
      module: 'dev',
      objid: 15307037,
      stime: 201807,
      title: '评论小程序插件',
      avatar: '……',
      nickname: '……',
      session_id: '……', // 登录态
      openid: '……', // openid
    },
  },

  onLoad() {
    // wx.login({
    //     success: (result) => {
    //         this.setData({
    //             'comment.code': result.code // 将临时登录凭证传递给评论小程序插件
    //         })
    //     }
    // })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意：评论小程序插件在接收到登录相关参数之后才会开始进行初始化。

以下为全部参数，修改其中任意参数，均会动态刷新评论数据，并从头开始加载：

名称 描述 必填 类型 默认值 可选值
gameid 业务在 微社区活动模板管理端 模块管理 -> 新增模块 -> 评论中心 中所填写的英文业务模块标识 ✔ String
module 业务 ID 标识 ✔ String
objid 页面内容唯一标识，接入者自定义即可 ✔ Number
stime 页面内容时间，年月即可，如：201807 ✔ Number
title 页面标题 ✔ String
avatar 用户头像 URL ✔ String
nickName 用户昵称 ✔ String
code 调用 wx.login() 所获取的临时登录凭证 String
openid openid String
session_id 登录态 String
wxapp_channelid 区分同一业务下的不同小程序，业务仅有一个小程序时无需填写 String
hotlevel 成为热门评论的获赞数阈值 Number 10
hotnum 热门评论的最大加载条数 Number 3
num 一次请求所加载的 评论 / 回复 数量 Number 6

# highlight

类型： String

默认值： '#f4236e'

描述： 全局高亮主题色。

# 事件

# total-change

描述： 评论总数变化时触发，用于监听评论总数变更。

用法：

<!-- wxml -->
<slug-comment
  bind:total-change="totalChange"
  data="{{ comment }}"
></slug-comment>
1
2
3
4
5
// js
Page({
  totalChange(event) {
    console.log(event.detail) // 评论总数
  },
})
1
2
3
4
5
6

# 插槽

插槽名称 描述
before 底部悬浮输入栏左侧插槽
after 底部悬浮输入栏右侧插槽

注意：底部悬浮条使用 flex 布局，若 slot 插槽中元素伸缩异常，请自行在插槽元素上添加 CSS 属性 flex: none;

用法：

<slug-comment data="{{ comment }}">
  <button slot="before" size="mini">返回</button>
  <button slot="after" size="mini">收藏</button>
</slug-comment>
1
2
3
4

← 接口 →