一、自定义消息
·如果基本消息类型不能满足你的要求,你可以根据实际业务需求自定义消息。
·以服务评价为例,帮助你快速了解实现流程。
二、创建一条自定义消息
调用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>