20_仿微信聊天小程序模板: 仿微信聊天小程序前端模板源码，聊天界面

写在前面：

网上搜集了很多这方面的案例，但不是报错就是不完整，我更新的这个案例是纯前端静态的Demo
这份更新是基于一位大佬的部分代码，下方有文章链接
仿照微信，包括文字聊天、发送图片并预览、录音（录音的播放功能未完善）
发送视频还没有做，目前业务没有这个需求
语音消息录制过短过长的判断（该接口暂时还未开放）
点击每条信息的×即可删除该条信息

效果图

微信小程序即时通讯组件

集成方式博客 https://blog.csdn.net/sinat_27612147/article/details/78456363

关于实现方式及原理请看 https://blog.csdn.net/sinat_27612147/article/details/78476241

*聊天内图片可翻页查看

集成

一、导入SDK相关文件

导入SDK时一定要用图中所示的路径，不然的话你就自己挨个修改wxml和wxss里面的文件路径哈。

图片文件总共大概是45kb，chat-input文件夹总共大概41kb。这就是SDK所有的文件，一共在90kb左右。

二、集成到聊天页面

1. 在聊天页面中导入chat-input文件

在聊天页的js文件中导入 let chatInput = require('../../modules/chat-input/chat-input');
在聊天页的wxml文件中引入布局

<import src="../../modules/chat-input/chat-input.wxml"/> 
<template is="chat-input" data="{{inputObj:inputObj,textMessage:textMessage,showVoicePart:true}}"/>

在聊天页的wxss文件中引入样式表@import "../../modules/chat-input/chat-input.wxss"; 根据你的路径来导入这些内容</>

2. 初始化`chatInput`

chatInput.init(page, {
			systemInfo: wx.getSystemInfoSync(),
			minVoiceTime: 1,//秒，最小录音时长，小于该值则弹出‘说话时间太短’
            maxVoiceTime: 60,//秒，最大录音时长，大于该值则按60秒处理
            startTimeDown: 56,//秒，开始倒计时时间，录音时长达到该值时弹窗界面更新为倒计时弹窗
            format:'mp3',//录音格式，有效值：mp3或aac，仅在基础库1.6.0及以上生效，低版本不生效
            sendButtonBgColor: 'mediumseagreen',//发送按钮的背景色
            sendButtonTextColor: 'white',//发送按钮的文本颜色
            extraArr: [{
                picName: 'choose_picture',
                description: '照片'
            }, {
                picName: 'take_photos',
                description: '拍摄'
            }, {
                picName: 'close_chat',
                description: '自定义功能'
            }],
            tabbarHeigth: 48
        });

page：这个是指当前的page。
systemInfo：必填。手机的系统信息，用于控件的适配。 -minVoiceTime: 最小录音时长，秒，小于该值则弹出‘说话时间太短’ -maxVoiceTime: 最大录音时长，秒，填写的数值大于该值则按60秒处理。录音时长如果超过该值，则会保存最大时长的录音，并弹出‘说话时间超时’并终止录音 -startTimeDown: 开始倒计时时间，秒，录音时长达到该值时弹窗界面更新为倒计时弹窗
extraArr：非必填。点击右侧加号时，显示的自定义功能。picName元素的名字就是对应image/chat/extra文件夹下的png格式的图片名称，用于展示自定义功能的图片。description元素用于展示自定义功能的文字说明。
tabbarHeight：非必填。这个也是用于适配。如果你的小程序有tabbar，那么需要填写这个字段，填48就行。如果你的小程序没有tabbar，那么就不要填写这个字段。原因我会在第二篇讲到。
format: 录音格式，有效值：mp3或aac，仅在基础库1.6.0及以上生效，低版本不生效
sendButtonBgColor: 发送按钮的背景色
sendButtonTextColor: 发送按钮的文本颜色

3. 监听获取输入的信息

在初始化控件之后，监听信息的输入，即可获取到指定类型的信息

文本信息：

//文本信息的输入监听
chatInput.setTextMessageListener(function (e) {
            let content = e.detail.value;//输入的文本信息
           
        });

语音信息：

//获取录音之后的音频临时文件
chatInput.recordVoiceListener(function (res, duration) {
         let tempFilePath = res.tempFilePath;//语音临时文件的路径
         let vDuration = duration;//录音时长
     });
//监听录音状态
 chatInput.setVoiceRecordStatusListener(function (status) {
            switch (status) {
                case chatInput.VRStatus.START://开始录音

                    break;
                case chatInput.VRStatus.SUCCESS://录音成功

                    break;
                case chatInput.VRStatus.CANCEL://取消录音

                    break;
                case chatInput.VRStatus.SHORT://录音时长太短

                    break;
                case chatInput.VRStatus.UNAUTH://未授权录音功能

                    break;
                case chatInput.VRStatus.FAIL://录音失败(已经授权了)

                    break;
            }
        })

自定义功能：

//收起自定义功能窗口
chatInput.closeExtraView();

//自定义功能点击事件
chatInput.clickExtraListener(function (e) {
            let itemIndex = parseInt(e.currentTarget.dataset.index);//点击的自定义功能索引
            if (itemIndex === 2) {
                that.myFun();//其他的自定义功能
                return;
            }
            //选择图片或拍照
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['compressed'],
                sourceType: itemIndex === 0 ? ['album'] : ['camera'],
                success: function (res) {
                    let tempFilePath = res.tempFilePaths[0];
                }
            });
        });
//新增右下角加号button点击事件
chatInput.setExtraButtonClickListener(function (dismiss) {
            console.log('Extra弹窗是否消息', dismiss);
        })

至此，SDK的集成就完成了！

github地址https://github.com/unmagic/wechat-im

更新日志：

2018-07-04

新增右下角发送按钮，在输入框获取焦点时，会自动切换到发送按钮。点击发送按钮事件和点击键盘右下角发送按钮事件均为一个事件setTextMessageListener。
新增发送按钮样式，如下：

chatInput.init(pageContext, {
            sendButtonBgColor: 'mediumseagreen',
            sendButtonTextColor: 'white'
        });

修复在自定义菜单弹出时，切换到文本输入并发送文本后，自定义弹窗依旧存在的问题。

2018-06-29

加入wx.getRecorderManager()以支持小程序基础库1.6.0以上。
兼容长按事件，根据版本调用longpress或longtap。
init方法参数新增format字段，用于管理录音格式，只在基础库1.6.0及以上生效，低版本不生效。有效格式为 aac或mp3 , 默认值为'mp3'，如下：

chatInput.init(pageContext, {
           systemInfo: systemInfo,
           format: 'mp3'//aac/mp3
       });

修复css高度样式错误问题。

2018-06-26

新增右下角加号button点击事件

chatInput.setExtraButtonClickListener(function (dismiss) {
            console.log('Extra弹窗是否消息', dismiss);
        })

ganshisheng / 20_仿微信聊天小程序模板

写在前面：

效果图

微信小程序即时通讯组件

集成方式博客 https://blog.csdn.net/sinat_27612147/article/details/78456363

关于实现方式及原理请看 https://blog.csdn.net/sinat_27612147/article/details/78476241

集成

一、导入SDK相关文件

二、集成到聊天页面

1. 在聊天页面中导入chat-input文件

2. 初始化`chatInput`

3. 监听获取输入的信息

文本信息：

语音信息：

自定义功能：

至此，SDK的集成就完成了！

更新日志：

简介

发行版

贡献者

近期动态

ganshisheng / 20_仿微信聊天小程序模板 .gitee-modal { width: 500px !important; }

写在前面：

效果图

微信小程序即时通讯组件

集成方式 博客 https://blog.csdn.net/sinat_27612147/article/details/78456363

关于实现方式及原理 请看 https://blog.csdn.net/sinat_27612147/article/details/78476241

集成

一、导入SDK相关文件

二、集成到聊天页面

1. 在聊天页面中导入chat-input文件

2. 初始化chatInput

3. 监听获取输入的信息

文本信息：

语音信息：

自定义功能：

至此，SDK的集成就完成了！

更新日志：

简介

发行版

贡献者

近期动态

搜索帮助

ganshisheng / 20_仿微信聊天小程序模板

集成方式博客 https://blog.csdn.net/sinat_27612147/article/details/78456363

关于实现方式及原理请看 https://blog.csdn.net/sinat_27612147/article/details/78476241

2. 初始化`chatInput`