阅读(1665) (10)

百度智能小程序 评论详情

2020-08-11 17:42:02 更新

comment-detail 评论详情组件


解释: 评论详情,评论的相关数据为托管数据。Web 态说明:由于浏览器的限制,在 Web 态内暂不支持回复评论等功能。

属性说明

属性名 类型 必填 默认值 说明
comment-param Object 评论核心参数
srid String 评论 ID
is-page-scroll Boolean true 滚动方式为页面滚动,若组件作为浮层使用,该参数需设为 false
need-toolbar Boolean true 是否需要底部 toolbar,若使用开发者自定义的底部 toolbar,该参数需设为 false
need-like-btn Boolean true 是否需要详情顶部父级评论的点赞按钮,默认显示
back-list-after-delete Boolean true 详情删除后是否回到列表页,前端是列表是页面几;若使用浮层,请设置该属性为 false
add-comment Boolean false 用于调起评论发布器发布评论
binddelete EventHandler 删除整体详情内容时触发,返回数据为{status, data:{srid}}
bindunlogin EventHanlder 绑定未登录事件,当前用户未登录或传入 openid 为空时触发

comment-param 服务参数说明

属性名 类型 必填 说明
openid String 用户身份的唯一标识,获取方法;获取评论列表与评论详情时,该参数为非必填;使用点赞、评论功能时,该参数为必填,否则调起 unlogin 方法
snid String 文章的唯一标识,与 path 参数一一对应,例如值为’20200101’
title String 文章标题
path String 文章页面地址,用于消息推送等流量入口的跳转回访,必须是以 / 开头的完整路径,如果 path 中参数包含中文字符,需对中文字符进行编码。与 snid 参数一一对应,例如 ‘/pages/home/index?snid=20200101’;长度限制 150 字符

代码示例 :详情组件放入页面

页面中引用动态库组件的方式是:在页面的 json 配置的 usingSwanComponents 字段中声明组件引用。

{
    "navigationBarTitleText": "评论详情",
    "usingSwanComponents": {
        "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
    }
}

在页面中放入详情组件,传入必要的参数。

<comment-detail
    comment-param="{{commentParam}}"
    srid="{{srid}}"
    need-like-btn="{{true}}"
    binddelete="detailDelete"
    bindunlogin="triggerLogin"
></comment-detail>
Page({
    data: {
        srid: '',
        commentParam: {}
    },
    onLoad(options) {
        if (options) {
            // 从列表页跳转的参数中拿到
            this.setData({
                srid: options.srid
            });
        }

        const param = getApp().globalData.commentParam;

        if (param && Object.keys(param).length) {
            this.setData({
                'commentParam': param
            });
        }
        else {
            this.setData({
                commentParam: {
                    snid: '10070000311753961',
                    path: '/pages/comment/index?snid=test_snid57',
                    title: '测试文章标题'
                }
            });
        }
    },
    triggerLogin(e) {
        swan.login({
            success: res => {
                swan.request({
                    url: 'https://spapi.baidu.com/oauth/jscode2sessionkey',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        code: res.code,
                        'client_id': '', // AppKey
                        sk: '' // AppSecret
                    },
                    success: res => {
                        if (res.statusCode === 200) {
                            const commentParam = this.data.commentParam;
                            this.setData({
                                commentParam: {
                                    ...commentParam,
                                    openid: res.data.openid
                                }
                            }, () => {
                                // 我们建议将参数设为全局变量,方便取用
                                getApp().globalData.commentParam = this.data.commentParam;
                            });
                        }
                    }
                });
            }
        });
    }
});

Bug&Tip

  • Tip:openid 和百度 APP 登录状态(合称登录状态)会影响用户的发布评论、举报、删除、消息提醒、跳转个人主页和页面收藏(合称互动行为),未登录用户仅可以浏览评论和点赞。
  • Tip:bindunlogin 是很重要的处理环节,用于非登录状态下拦截用户进行互动行为,引导用户并将 openid 传递给组件,建议参照示例认真设计。