有奖捉虫:云通信与企业服务文档专题,速来> HOT
TUIKit 已经在内部完成了基本消息的渲染工作,您可以很简单地通过属性设置来调节消息展示样式,也可以重新定制属于自己的自定义消息。

基本消息类型



自定义消息

如果基本消息类型不能满足您的要求,您可以根据实际业务需求自定义消息。
服务评价为例,帮助您快速了解实现流程。

创建一条自定义消息

调用createCustomMessage进行自定义消息的创建
const message = wx.$TUIKit.createCustomMessage({
to: this.getToAccount(),
conversationType: this.data.conversation.type,
payload:{
data: JSON.stringify({
businessID: BUSINESS_ID_TEXT.EVALUATION,
version: FEAT_NATIVE_CODE.NATIVE_VERSION,
score: this.data.score,
comment: this.data.comment,
}),
description: STRING_TEXT.TYPETEXT,
extension: STRING_TEXT.TYPETEXT,
},
});

发送自定义消息

调用sendMessage,将上面创建的自定义消息实例传入。
wx.$TUIKit.sendMessage(message)

渲染自定义消息

在消息列表里对自定义消息进行渲染。
if (customMessage.businessID === BUSINESS_ID_TEXT.EVALUATION) {
const renderDom = [{
type: 'evaluation',
title: message.payload.description,
score: customMessage.score,
description: customMessage.comment,
}];
return renderDom;
}
将解析出的数据在对应的wxml页面进行展示
<view wx:if="{{renderDom[0].type ==='evaluation'}}" class="custom-message {{isMine?'my-custom':''}}">
<view class="custom-content">
<view class="custom-content-title">{{renderDom[0].title}}</view>
<view class="custom-content-score">
<image class="score-star" wx:for="{{renderDom[0].score}}" wx:key="*this" src="../../../../static/images/star.png" />
</view>
<view class="custom-content-description">{{renderDom[0].description}}</view>
</view>
</view>