@tripmini/tchat v0.1.9

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

安装

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

npm

npm install @tripmini/tchat -S

使用

引入组件

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

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

<tchat id="tchat" />

参数

注意

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

操作会话相关

参数（按顺序展示）

API

// 在引入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将实现的功能
    }
})