阅读(2475) 赞(9)

百度智能小程序评论列表

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

comment-list 评论列表组件

解释：评论列表，评论的相关数据为托管数据。Web 态说明：由于浏览器的限制，在 Web 态内暂不支持发布评论、收藏、分享等功能。

属性说明

属性名	类型	必填	默认值	说明
comment-param	Object	是		评论核心参数
toolbar-config	Object	否		底部 toolbar 的相关配置
is-page-scroll	Boolean	否	true	滚动方式为页面滚动，若组件作为浮层使用，该参数需设为 false 。
need-toolbar	Boolean	否	true	是否需要底部 toolbar，若使用开发者自定义的底部 toolbar，该参数需设为 false 。
add-comment	Boolean	否	false	用于调起评论发布器发布评论
detail-path	String	否		点击单条评论跳转的详情页页面 path，若没有配置则不会发生跳转；配置的前提是列表与详情均是页面级。
is-folded	Boolean	否	false	是否折叠列表，默认全展示。
fold-num	Number	否	3	折叠后列表展示最大条数，默认 3 条，最多 10 条。
view-more-path	String	否		传入放置评论组件的页面路径，如`'/pages/list/index'`，组件内部会触发跳转逻辑。
view-more-style	Object	否		『全部 xx 条』的样式，目前只支持开发者自定义字体颜色。
bindclickcomment	EventHandler	否		绑定点击单条评论的事件，点击单条评论时触发，返回数据为`{status, data:{srid}}`。
bindunlogin	EventHandler	否		绑定未登录事件，当前用户未登录或传入 openid 为空时触发。
bindviewmore	EventHandler	否		绑定点击更多事件，若除了页面跳转还需要其他操作，可通过该回调执行；若为浮层，也可使用该回调自定义交互逻辑。

comment-param 服务参数说明

属性名	类型	必填	说明
openid	String	否	用户身份的唯一标识，获取方法；获取评论列表与评论详情时，该参数为非必填；使用点赞、评论功能时，该参数为必填，否则调起 unlogin 方法。
snid	String	是	文章的唯一标识，与 path 参数一一对应，例如值为`'20200101'`。
title	String	是	文章标题
path	String	是	文章页面地址，用于消息推送等流量入口的跳转回访，必须是以 / 开头的完整路径，如果 path 中参数包含中文字符，需对中文字符进行编码。与 snid 参数一一对应，例如`'/pages/home/index?snid=20200101'`；长度限制 150 字符。
images	Array	否	数组第一项用于收藏功能的展示图片，例：[‘https://b.bdstatic.com/miniapp/images/demo-dog.png’]。

toolbar-config 参数说明

属性名	类型	必填	默认值	说明
placeholder	String	否		输入框提示文字
moduleList	Array	否	[‘comment’, ‘like’, ‘favor’, ‘share’]	显示的互动模块，对应默认值分别是：评论数、点赞、收藏、分享。
share	Object	否		若 moduleList 里配置了 share 模块，该参数为必填。
share.title	String	是		分享标题
share.content	String	否		分享内容
share.imageUrl	String	否		分享图标
share.path	String	否		页面 path，必须是以 / 开头的完整路径，如果 path 中参数包含中文字符，需对中文字符进行编码。

view-more-style 参数说明

属性名	类型	必填	默认值	说明
color	String	否	‘#3388ff’	『全部 xx 条』的字体颜色，默认为视觉提供色号，开发者可传入自定义色号。

代码示例 1：列表组件放入页面

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

{
    "navigationBarTitleText": "评论列表",
    "usingSwanComponents": {
        "comment-list": "dynamicLib://myDynamicLib/comment-list"
    }
}

在页面中放入列表组件，传入必要的参数。

<!-- 评论列表组件 -->
<comment-list
    comment-param="{{commentParam}}"
    detail-path="{{detailPath}}"
    toolbar-config="{{toolbarConfig}}"
    bindclickcomment="clickComment"
    bindunlogin="triggerLogin"
></comment-list>

Page({
    data: {
        commentParam: {},
        detailPath: '/pages/detail/index?params1=abd',
        // 底部互动 bar 的配置
        toolbarConfig: {
            // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
            share: {
                title: '测试文章标题'
            }
        }
    },

    onLoad(query) {
        this.setData({
            commentParam: {
                snid: '10070000311753961',
                path: '/pages/comment/index?snid=test_snid57',
                title: '测试文章标题',
                content: '测试文章内容'
            }
        });
    },

    onReady() {
        requireDynamicLib('myDynamicLib').listenEvent();
    },

    clickComment(e) {
    },

    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;
                            });
                        }
                    }
                });
            }
        });
    }
});

代码示例 2：列表支持折叠

<view class="container">
    <view class="article-header">
        <text class="title" selectable="true">{{header.title}}</text>
        <view class="source">
            <image s-if="!!header.avatar" src="{{header.avatar}}"/>
            <view class="info">
                <text class="author">{{header.author}}</text>
                <text class="time">{{header.time}}</text>
            </view>
        </view>
    </view>

    <view class="article-content">
        <block s-for="{{content.items}}" s-for-index="eleIndex">
            <block s-if="{{item.type === 'text'}}">
                <view class="content-p" data-index="{{eleIndex}}">
                    <text selectable="true">{{item.data}}</text>
                </view>
            </block>
            <block s-elif="{{item.type === 'image'}}">
                <image
                    class="content-img"
                    src="{{item.data.src}}"
                    original-src="{{item.data.src}}"
                    mode="widthFix"
                    preview="true"
                    lazy-load="true"/>
            </block>
        </block>
    </view>

    <!-- 评论列表支持折叠 -->
    <comment-list class="list"
        comment-param="{{commentParam}}"
        is-folded="{{true}}"
        fold-num="{{foldNum}}"
        toolbar-config="{{toolbarConfig}}"
        bindclickcomment="clickComment"
        bindunlogin="triggerLogin"
        bindviewmore="viewMore"
    ></comment-list>
    <div class="comment-list-folded-bottom-margin"></div>

    <view class="list-after">
        <view>欢迎使用智能小程序动态库
        欢迎使用智能小程序动态库
        欢迎使用智能小程序动态库</view>
        <image src="https://www.programbbs.com/pic/baiduapp/demo-dog.png" rel="external nofollow"  rel="external nofollow" 
            class="img"></image>
        <view>欢迎使用智能小程序动态库
        欢迎使用智能小程序动态库
        欢迎使用智能小程序动态库</view>
    </view>
</view>

Page({
    data: {
        commentParam: {},
        header: {
            title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛',
            avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
            author: '百度智能小程序',
            time: '2020年04月14日'
        },
        content: {
            items: [
                {
                    type: 'image',
                    data: {
                        src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
                    }
                },
                {
                    type: 'text',
                    data: '测试文字'
                }
            ]
        },
        // 折叠展示最大评论条数
        foldNum: 5,
        // 底部互动 bar 的配置
        toolbarConfig: {
            // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
            share: {
                title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛'
            }
        }
    },

    onLoad(query) {
        this.setData({
            commentParam: {
                snid: '10070000311753961',
                path: '/pages/comment/index?snid=test_snid57',
                title: '测试文章标题',
                content: '测试文章内容'
            }
        });
    },

    onReady() {
        requireDynamicLib('myDynamicLib').listenEvent();
    },

    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;
                            });
                        }
                    }
                });
            }
        });
    },

    clickComment(e) {
        swan.showToast({
            title: 'click comment success'
        });
    },

    viewMore() {
        // swan.showToast({
        //     title: 'click viewmore success'
        // });
    }
});

{
    "navigationBarTitleText": "折叠列表页",
    "usingSwanComponents": {
        "comment-list": "dynamicLib://myDynamicLib/comment-list"
    }
}

.article-header {
    padding: 0 39.8rpx;
}

.article-header .title {
    display: block;
    font-size: 56rpx;
    line-height: 1.5;
    font-weight: 700;
}

.article-header .source {
    margin-top: 56rpx;
    display: flex;
    align-items: flex-start;
}

.article-header .source image {
    width: 82rpx;
    height: 82rpx;
    border-radius: 100%;
    margin-right: 18.7rpx;
    background-color: #eef1f4;
    background-size: 37.4rpx 37.4rpx;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../common/assets/logo-default.png);
}

.article-header .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 82rpx;
}

.article-header .info .author {
    font-size: 37.4rpx;
    line-height: 1;
    display: block;
    color: #000;
    margin-bottom: 16.4rpx;
}

.article-header .info .time {
    display: block;
    color: #999;
    font-size: 28rpx;
    line-height: 1;
}

.article-content {
    color: #000;
    font-size: 44.5rpx;
    line-height: 1.58;
    letter-spacing: 2.84;
    margin-bottom: 70.2rpx;
}

.article-content .content-img {
    width: 100%;
    margin-top: 70.2rpx;
    vertical-align: bottom;
    background-color: #eef1f4;
    background-size: 74.9rpx 74.9rpx;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../common/assets/logo-default.png);
}

.article-content .content-p {
    margin: 57.3rpx 39.8rpx -12.9rpx 39.8rpx;
    text-align: justify;
    word-break: break-all;
}

.list-after {
    padding: 30rpx 18rpx 90rpx;
}

.comment-list-folded-bottom-margin {
    height: 14.4rpx;
    background-color: #f5f5f5;
}

调起评论发布功能

若开发者希望调起评论发布器，且与组件内的评论发布逻辑保持一致（发布成功插入列表第一条，且滚动到列表顶部），可使用如下方法：

在 js 文件中，将 add-comment 属性设为 true ，即可调起评论发布器。

Tip：前提是评论列表组件已渲染。

代码示例 3：列表组件放入浮层且自定义底部 toolbar

<view class="container">
    <image src="https://www.programbbs.com/pic/baiduapp/demo-dog.png" rel="external nofollow"  rel="external nofollow" 
        class="img"></image>
    <view class="bg">这是背景</view>
    <view class="float-list-wrap" s-if="{{showList}}">
        <view class="float-title">全部评论</view>
        <view class="float-list">
            <comment-list
                class="float-list-component"
                add-comment="{{addComment}}"
                is-page-scroll="{{false}}"
                comment-param="{{commentParam}}"
                need-toolbar="{{false}}"
                bindclickcomment="clickComment"
                bindunlogin="triggerLogin"></comment-list>
        </view>
    </view>
    <view class="float-detail-wrap" s-if="{{showDetail}}">
        <view class="float-detail-close" bindtap="closeDetail">关闭</view>
        <view class="float-title">评论详情</view>
        <view class="float-detail">
            <comment-detail
                class="float-detail-component"
                add-comment="{{publishComment}}"
                srid="{{srid}}"
                is-page-scroll="{{false}}"
                comment-param="{{commentParam}}"
                need-toolbar="{{false}}"
                back-list-after-delete="{{false}}"
                binddelete="detailDelete"
                bindunlogin="triggerLogin"
            ></comment-detail>
        </view>
    </view>
    <button class="my-toolbar" bindtap="addComment">我是自定义底部 bar</button>
</view>

Page({
    data: {
        commentParam: {},
        addComment: {},
        showList: false,
        showDetail: false,
        srid: ''
    },

    onLoad() {
        this.setData({
            commentParam: {
                snid: '10070000311753961',
                path: '/pages/comment/index',
                title: '测试文章标题',
                'snid_type': ''
            }
        });
    },

    clickComment(e) {
        this.setData({
            srid: e.data.srid,
            showDetail: true,
            showList: false
        });
    },

    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
                                }
                            });
                        }
                    }
                });
            }
        });
    },

    addComment() {
        const showDetail = this.data.showDetail;

        if (!showDetail) {
            this.setData({
                showList: true,
                addComment: true
            }, () => {
                // 需要设为 false 的原因：因为调起发布监听 addComment 的变化，如果一直为 true，无法再次调起
                this.setData({
                    'addComment': false
                });
            });

        }
        else {
            this.setData({
                showList: false,
                publishComment: true
            }, () => {
                // 需要设为 false 的原因：因为调起发布监听 addComment 的变化，如果一直为 true，无法再次调起
                this.setData({
                    'publishComment': false
                });
            });
        }

    },

    /**
     * 详情删除后的回调
     *
     * @param {Object} options 返回的相关数据，{status, data}
     * @property {string} srid 评论 id
     */
    detailDelete(options) {
        if (options.data.srid) {
            this.setData({
                showDetail: false,
                showList: true
            });
        }
    },

    closeDetail() {
        this.setData({
            showDetail: false,
            showList: true
        });
    }
});

{
    "navigationBarTitleText": "智能小程序示例",
    "usingSwanComponents": {
        "comment-list": "dynamicLib://myDynamicLib/comment-list",
        "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
    }
}

page {
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.img {
    width: 100%;
    position: relative;
    z-index: -1;
    -webkit-overflow: visible;
}

.bg {
    flex: 1;
}

.float-list-wrap,
.float-detail-wrap {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: block;
    height: 900rpx;
    animation: climbup .5s;
    width: 100%;
    z-index: 99;
    border-top: 1px solid #666;
    border-radius: 10rpx;
}

.float-title {
    text-align: center;
    padding: 20rpx 0;
}

.float-list-component,
.float-detail-component {
    height: 100%;
}

.float-list,
.float-detail {
    overflow-y: scroll;
    height: 700rpx;
    /* my-toolbar 有多高，这里就设多少 */
    margin-bottom: 90rpx;
}

.float-detail-close {
    float: right;
    padding: 20rpx;
}

.my-toolbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    z-index: 999;
    font-size: 28.99rpx;
}

@keyframes climbup {
    /* 因为浮层块高度为800rpx */
    0% {
        height: 0;
    }
    25% {
        height: 200rpx;
    }
    50% {
        height: 400rpx;
    }
    75% {
        height: 600rpx;
    }
    100% {
        height: 900rpx;
    }
}

Bug&Tip

Tip：评论列表数据开发者无法单独获取，也无需配置，评论列表会托管给组件，开发者接入组件之后，用户评论发布后会展现在评论列表上（自己可见），审核通过后会全体用户可见。
Tip：openid 和百度 APP 登录状态（合称登录状态）会影响用户的发布评论、举报、删除、消息提醒、跳转个人主页和页面收藏（合称互动行为），未登录用户仅可以浏览评论和点赞。
Tip：收藏功能在基础库 3.190.1 以上可用。
Tip：bindunlogin 是很重要的处理环节，用于非登录状态下拦截用户进行互动行为，引导用户并将 openid 传递给组件，建议参照示例认真设计。

← 百度智能小程序一站式互动

百度智能小程序评论详情 →

百度智能小程序 评论列表