tchat 微信小程序聊天对话交互组件

安装

tchat是一个微信小程序组件，使用前需要下载及在开发工具构建npm包

npm

npm install @tripmini/tchat -S

使用

引入组件

{
  "usingComponents": {
    "tchat": "@tripmini/tchat/index"
  }
}

页面中使用（id是后续建议使用的参数，不是组件内部需要的值）

<tchat id="tchat" />

参数

| 属性 | 类型 | 默认值 | 必填 | 说明 | | ---------------------- | ----------- | ------ | -------- | ------------------------------------------------------------ | | load-config-funtion | string | - | 必填 | 获取自定义配置的方法名，此方法需要在page.js中定义，示例参考下方 | | bind:layoutInitialized | eventhandle | - | 否 | tchat布局需要计算，等待计算完成会触发此事件，需要在此事件发生之后再往容器里面添加内容，否则会有一些体验不好的问题 | | bind:sendTextMessage | eventhandle | - | 否 | 输入完成一条文字消息（带表情） | | bind:failIconTap | eventhandle | - | 否 | 消息发送错误时，点击消息左测红色叹号图标时触发 |

注意

1. 页面在使用自定义头部导航时，navbarHeight一定需要提供，否则会出现各种UI错位的问题

一些默认的配置信息

const config = {
  /**
   * 顶部导航栏占用的高度，单位px
   * 如使用自定义导航栏，则需要填入自定义导航栏高度，否则 0
   */
  navbarHeight: 0,
  /**
   * 最小录制语音时间
   * 单位毫秒，默认 1 * 1000
   */
  minVoiceDuration: 1 * 1000,
  /**
   * 最大录制语音时间
   * 单位毫秒，默认 60 * 1000
   */
  maxVoiceDuration: 60 * 1000,
  /**
   * 最小取消发送语音的移动距离
   * 单位px，默认 40
   */
  minCancelVoiceDistance: 40,
  /**
   * 日志工具，如提供，至少包含以下方法且需要支持任意参数个数及类型
   * 
   * + info
   * + error
   */
  logger: null,
  /**
   * 点击更多时，允许选择图片的数量，默认9
   */
  chooseImageCount: 9
}

示例

wxml

<tchat 
  id="tchat"
  load-config-funtion="getTchatCustomConfig" 
  bind:layoutInitialized="initConversation"
  bind:sendTextMessage="sendTextMessage"
  bind:failIconTap="resendMessage"
/>

js

// 使用tchat组件的js文件
Page({
    // 提供tchat配置
    getTchatCustomConfig() {
        return {
            navbarHeight: N, // 实际值，单位px
            chooseImageCount: N, // 实际值，1-9
            // ...
        }
    },
    // tchat布局初始化完成
    onLayoutInitialized() {
        // todo: 渲染历史消息
    },
    // 发送文字消息事件
    onSendTextMessage(event) {
        const { data } = event.detail
        console.log(data) // 文字消息内容
    },
    // 重发消息
    resendMessage(event) {
        const { id } = event.detail
        console.log(id) // 消息id，可以通过下文中方法获取消息实体
    }
})

API

Conversation

操作会话相关

参数（按顺序展示）

| 名称 | 类型 | 默认值 | 必填 | 说明 | | -------------- | ---- | ------ | ---- | --------------- | | tchatComponent | | - | 必填 | tchat组件的实例 | | tim | | - | 必填 | 已登录的IM实例 |

API

| 名称 | 说明 | | ------------------------------- | ------------------------------------------------------------ | | push(message) | 向会话容器中添加一条状态为success的IM消息 | | bulkPush(messages) | 向会话容器中添加多条状态为success的IM消息 | | delete(id) | 根据消息id移除一条消息记录（仅在显示容器内移除，不涉及IM逻辑） | | getMessageById(id) | 根据IM消息id或者IM消息实体，搜索范围仅在使用Conversation操作的消息场景：消息发送错误时，点击错误图标会给id信息，通过此方法获取IMMessage | | sendTextMessage(toUserId, text) | 向指定userId发送一条文字消息，返回Promise对象，可捕获错误进行后续处理（如遇到了屏蔽关键字） |

// 在引入npm包时，注意不要使用vscode的智能提示
// 小程序的包构建在miniprogram_npm中，使用提示会导致找不到模块

import Conversation from '@tripmini/tchat/helper/Conversation'
// 已登录的IM实例
import tim from '...'

Page({
    onLoad() {
        this.tchat = this.selectComponent('#tchat')
    },
    // 提供tchat配置
    getTchatCustomConfig() {
        return {
            navbarHeight: N, // 实际值，单位px
            chooseImageCount: N, // 实际值，1-9
            // ...
        }
    },
    // tchat布局初始化完成
    onLayoutInitialized() {
        this.conversation = new Conversation(this.tchat, tim)
        this.loadMessages()
    },
    // 加载历史消息
    async loadMessages() {
        const list = await tim.getMessageList()
        // list 注意过滤系统消息，类似上次portal端问题
        this.conversation.bulkPush(list)
    },
    // 发送文字消息事件
    onSendTextMessage(event) {
        const { data } = event.detail
        this.conversation.sendTextMessage(fromUserId, data)
    },
    // 重发消息
    resendMessage(event) {
        const { id } = event.detail
        const message = this.conversation.getMessageById(id)
        console.log(message)
        // TODO: conversation将实现的功能
    }
})