即时通信 IM 小程序(添加自定义消息)

TUIKit 已经在内部完成了基本消息的渲染工作,可以以很简单地通过属性设置来调节消息展示样式,也可以重新定制属于自己的自定义消息。

相关产品
即时通信 IM 产品页,含版本规格、价格与购买入口。

一、自定义消息

·如果基本消息类型不能满足你的要求,你可以根据实际业务需求自定义消息。

·以服务评价为例,帮助你快速了解实现流程。

二、创建一条自定义消息

调用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>

赞 (0)
上一篇 4天前
下一篇 4天前