即时通信 IM 小程序-聊天互动（含 UI）-文档中心-腾讯云

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>
﻿
﻿
小程序

本页目录：

基本消息类型

自定义消息

创建一条自定义消息

发送自定义消息

渲染自定义消息
