--- title: 扩展组件 header: develop nav: extended sidebar: communicate-bar --- ## 互动bar **解释：** **属性说明：** |属性名 | 类型 | 必填 | 默认值 |说明 | |---|---|---|---|---| |mode|String|否|special|互动bar的类型，有两种，一种为带评论框：special；一种为不带评论框：nomarl| |is-comment|Boolean|否|true|文章是否可评论| |is-show-comment|Boolean|否|true|是否显示评论图标，在mode为nomarl时，与点赞和分享最少显示2个，否则设置失效| |is-show-like|Boolean|否|true|是否显示点赞图标，在mode为nomarl时，与评论和分享最少显示2个，否则设置失效| |is-show-share|Boolean|否|true|是否显示分享图标，在mode为nomarl时，与评论和点赞最少显示2个，否则设置失效| |comment-text|String|否|发表评论领积分|互动bar中评论框的文案，仅在mode为special时配置生效| |comment-msg|String|否||评论icon气泡提示文案，仅在mode为special时配置生效| |comment-icon-text|String|否|评论|评论icon右侧文案，也可以是评论数，仅在mode为nomarl时配置生效| |share-text|String|否|转发|转发icon右侧文案，也可以是转发数，仅在mode为nomarl时配置生效| |share-param|Object|否||调起分享面板分享时的参数| |share-param.title|String|否||分享标题| |share-param.content|String|否||分享内容| |share-param.path|String|否||页面 path，必须是以 / 开头的完整路径| |share-param.imageUrl|String|否||分享图标| |is-liked|Boolean|是|false|赞的状态| |like-icon-type|String|否|hand|图标类型，提供两种，包括hand(默认)和heart| |like-text|String|否|赞|点赞按钮上的文案，默认为赞，仅在mode为nomarl时配置生效| |like-num|Number|否|0|点赞数，仅在mode为nomarl时配置生效| |like-type|Number|否|0|点赞的对象类型，0:代表动态; 1:代表评论| |like-param|Object|否||点赞服务需要的必要参数| |like-param.openid|String|是||用户身份唯一标识，[获取方法](https://smartapp.baidu.com/docs/develop/api/open/log_Session-Key/)| |like-param.snid|String|是||动态id,在开发者侧的唯一标识。当为空，默认开发者将数据托管在宿主，小程序侧创建动态后返回唯一标识给开发者。| |like-param.srid|String|是||评论id。不为空，表示对评论进行点赞。若小程序侧没有 srid 对应的标识，则认为此时对主题进行点赞。| |like-param.appkey|String|是||小程序App Key，在小程序管理中心>设置>开发设置中获取| |like-animation-type|Number|否|1|点赞动效形式，0:无动效；1:轻动效；2:强动效| |like-toast|Object|否||点赞toast配置| |like-toast.isShowToast|Boolean|否|true|点赞后的结果反馈是否弹出toast提示| |like-toast.toastText|Array|否|['已点赞', '已取消']|toast文案，默认为已点赞、已取消| |content-placeholder|String|否|评论发布器属性，仅NA版支持，请输入内容|提示占位文案| |module-list|Array|||评论发布器属性，仅NA版支持，显示模块list，参见[原生半屏内容发布器文档](https://smartapp.baidu.com/docs/develop/api/open/replyeditor_swan-openReplyEditor/)| |emoji-path|String|否||评论发布器属性，仅NA版支持，设置自定义表情配置路径| |foucs|Boolean|否|false|评论发布器属性，仅组件版支持，true代表调起，false则不调起| |upLoad-image|Object|否||评论发布器属性，仅组件版支持，上传图片配置| |upLoad-image.isUpLoadImage|Boolean|否|false|仅组件版支持，是否展示上传图片按钮| |upLoad-image.requestUrl|String|isUpLoadImage为true，则必填||仅组件版支持，由于小程序图片预览只能是http或https，所以上传图片需要先上传到服务器| |comment-param|Object|是|-|评论发布器属性，NA和组件版支持，内容评论成功后返回给百度服务测的参数，在点击发表按钮时回传| |comment-param.openid|String|是|-|NA和组件版支持，用户身份唯一标识，[获取方法](https://smartapp.baidu.com/docs/develop/api/open/log_Session-Key/)| |comment-param.snid|String|是|-|NA和组件版支持，动态id，是动态在开发者侧的唯一标识。不应为空。若此时小程序侧没有对应的标识，则会先创建动态。| |comment-param.spid|String|是|-|NA和组件版支持，一级评论id。为空表示对动态评论；不为空表示对评论进行评论。| |comment-param.srid|String|是|-|NA和组件版支持，此条评论id| |comment-param.title|String|是|-|NA和组件版支持，动态标题| |comment-aram.content|String|是|-|NA和组件版支持，动态内容| |comment-param.images|Array|否|-|NA和组件版支持，动态图集, json数组, 格式 ["a.jpg","b.jpg"]| |comment-param.appkey|String|是||NA和组件版支持，小程序App Key，在小程序管理中心>设置>开发设置中获取| |comment-param.path|String|是||NA和组件版支持，用于跳转的schema的path和query的拼接，参考如下：path='/page/a/b?query=q'| |bind:error|EventHandle|||点赞或者发表按钮时在用户未登录状态下触发的事件| |bind:likesuccess|EventHandle|||点击点赞按钮，在百度服务成功后将状态返回给给使用组件者| |bind:likefail|EventHandle|||点击点赞按钮，在百度服务失败后将状态返回给给使用组件者| |bind:sharesuccess|EventHandle|||分享成功的回调| |bind:sharefail|EventHandle|||分享失败的回调| |bind:comment|EventHandle|||在mode为nomarl时点击评论icon的事件| |bind:relasecomment|EventHandle|||评论发布器事件，NA和组件版支持，点击发表按钮时触发的事件。在NA版中相当于success成功回调中status为reply状态| |bind:commentpanelclose|EventHandle|||评论发布器事件，仅NA版支持，点击空白处关掉发布器的回调，相当于NA版success成功回调中status为draft的状态| |bind:browsemode|EventHandle|||评论发布器事件，仅组件版支持，当输入框失焦后会触发事件(NA版不支持，降级版支持)| |bind:previewimage|EventHandle|||评论发布器事件，仅组件版支持，点击输入框中已经上传的图片时触发的事件(NA版不支持，降级版支持)| **使用方法** * 安装组件 ``` npm install @smt-ui/content-component ``` * 在 页面json 文件中 ``` { "navigationBarTitleText": "标题", "usingComponents": { "c-communicate-bar": "@smt-ui/content-component/src/communicate-bar" } } ``` * 在 swan 文件中 ``` ``` * 在 js 文件中 ``` // 测试用例 const getSrid = () => { let openid = ''; for (let i = 0; i < 12; i++) { openid += Math.floor(Math.random() * 10); } return openid + 'dd'; }; Page({ data: { likeParam: { snid: '999999999999', appkey: 'mkItFCpOGQDyGqitHh0VKrxP2jBGU20V', srid: getSrid(), openid: '36GetTsw0nWRMVaYnlswLQ9t7y' }, showPublish: false, likeText: '赞', likeNum: 20, shareText: 20, commentMsg: '抢沙发' }, relaseComment(e) { let param = { snid: '999999999999', path: '332222', appkey: 'mkItFCpOGQDyGqitHh0VKrxP2jBGU20V', spid: 'ddd', srid: getSrid(), title: '评论的文章的标题', openid: '36GetTsw0nWRMVaYnlswLQ9t7y', content: 'cascsahclsahcslchdls' }; this.setData('commentParam', param); }, clicksucc(e) { console.log('点赞点击成功', e.detail); }, error(e) { swan.login({ success: res => { console.log('login success', res); }, fail: err => { console.log('login fail', err); } }); }, shareSuccess(e) { let shareText = this.data.shareText + 1; this.setData('shareText', shareText); } }); ``` * 在 css 文件中 ``` .wrap-communicate-bar { padding: 10px 0; background-color: #eee; } ```