GitHub

demo运行

npm install
npm run serve

服务器端在/server下

FChat使用手册：

简介

简易版的仿微信版移动端h5聊天插件，使用简单，兼容音频，高度定制化，ios/android兼容。

安装

npm i fonlineconsultation

使用方法

main.js

import '../node_modules/fonlineconsultation/packages/styles/index.less';
import fonlineconsultation from 'fonlineconsultation';
Vue.use(fonlineconsultation);
//音频开启，参照下面音频章节
import '../node_modules/fonlineconsultation/packages/recorder.js';

x.vue

<FonlineConsultation></FonlineConsultation>

数据结构

  {
         type:消息类型(message / image / video / audio),
         content:消息内容,
         pos:消息位置(left/right),
         ? duration:"" //音频时间 仅音频存在
  }

可配置参数

必要方法

方法名	作用
send	获取普通消息回调，用来发送
sendImg	获取图片/视频(可开关)信息回调，用来发送
sendVoice	获取音频消息回调，用来发送

如何使用？

<FonlineConsultation
    @send="sendMsg"
    @sendImg="sendImg"
    @sendVoice="senVoice"
></FonlineConsultation>

方法的定义

/*
*@ send
*/
sendMsg(sendObject){
    //sendObject 为消息对象
}
/*
*@ sendImg
*
*/
sendImg(pro){
   pro.then((sendObject)=>{
       //sendObject为图片消息对象
   })
}
/*
*@ sendVoice
*
*/
sendVoice(sendObject){
    //sendObject为消息对象
}

使用样例

/*
* sendMessage为服务器api
*/  
methods: {
    // 模拟一个复读机
    sendImg(cb) {
      cb.then((sendObj) => {
        this.$FChat.loading();
        sendMessage(sendObj).then((res) => {
          if (res.data) { 
            this.$FChat.cancelLoading();
            // 我方发送
            this.$FChat.sendMessage(sendObj);
            // 对方发送
            let { content, pos, type } = res.data;
            this.$FChat.sendMessage({
              content: content,
              type: type,
              pos: "left",
            });
          }
        });
      }).catch((err) => {
        alert(err);
      });
    },
    // 普通文本消息
    sendMsg(msgObject) {
      this.$FChat.loading();
      sendMessage(msgObject).then((res) => {
        if (res.data) { 
          this.$FChat.cancelLoading();
          // 己方发送
          this.$FChat.sendMessage(msgObject);
          // 服务器返回 - 格式拼接
          let { content, pos, type } = res.data;
          this.$FChat.sendMessage({
            content: content,
            type: type,
            pos: "left"
          });
        }
      });
    },
    //音频
    senVoice(msgObject) {
      sendMessage(msgObject).then((res) => {
        if (res.data) { 
          this.$FChat.cancelLoading();
          // 己方发送
          this.$FChat.sendMessage(msgObject);
          // 服务器返回 - 格式拼接
          let { content, pos, type, duration } = res.data;
          this.$FChat.sendMessage({
            content: content,
            type: type,
            pos: "left",
            duration: duration
          });
        }
      });
    },
  }

属性参数

参数名	功能	示例	说明	类型
username	header头部的联系人	:username="'admin'"		String
contentHeight	聊天区域高度	:contentHeight="200"	不建议修改，如果有header头可以修改FChat类的ToastTop，兼容性较好，而且请确认插件位于页面最低，防止出现输入法弹出高度问题	Number
contentBg	聊天区域的背景颜色	:contentBg="'#123456'"		String
preventId	控制音频长按时禁止选中的范围(防止长按选中导致失去焦点，详情见注意)	:preventId="'allContent'"	插件通过document.getElementById()获取	String
leftIcon	左侧的图标(音频)	:leftIcon="'iconFont icon-xxx'"	左侧图标(音频/键盘)切换时的音频图标	String
leftIconChange	左侧图标(键盘)	同上	左侧图标(音频/键盘)切换时的键盘图标	String
leftIconSize	左侧图标的大小，两个相同		默认大小23	Number
leftIconColor	左侧图标的颜色	十六进制/rgb颜色	默认为#000	String
rightIconLeft	右侧图标的最左侧图标(图片)			String
rightIconRight	右侧图标的最左侧图标(发送)			String
rightIconSize	右侧图标的大小，两个相同		默认大小20	Number
rightIconColor	右侧图标的颜色	十六进制/rgb颜色		String
popBg	聊天气泡颜色	十六进制/rgb颜色	默认#6AEA9E	String
popSize	聊天气泡字号		默认15	Number
popRightAva	聊天气泡右侧头像	图片链接		String
popLeftAva	聊天气泡左侧头像	图片链接		String

插槽

(如需自定义请重写方法)

名称	作用
leftIcon	左侧图标插槽(带有切换音频/文本方法)
centerText	中间的输入框插槽(原框带仿微信文本换行功能，替换后如需要请自行实现)
rightIcon	右侧图标插槽(带有选择图片，发送文本方法[包含发送后动态宽高的计算])
loading	图片loading(id为messageLoading，绑定着消息发送的loading方法)
header	整个header的插槽，注意要设置id为onlineHeader方便计算内容高度
hLeft	header左侧功能
hCenter	header中间整体
hRight	header右侧功能

单独气泡重写插槽

插槽名称	说明
message	文字消息插槽
image	图片消息插槽
audio	音频消息插槽
video	视频消息插槽

该条消息的数据均可通过

//message
<template v-slot:message="message">
	{{message}}
</template>
//image
<template v-slot:image="image">
	{{image}}
</template>
//audio
<template v-slot:audio="audio">
	{{audio}}
</template>
//video
<template v-slot:voice="voice">
	{{voice}}
</template>

来获取当前信息所对应的对象。

注：如果文本消息出现类似网址，则会渲染成a标签：

content:"我是一个网址<a>http://www.baidu.com</a>"

整体聊天气泡重写插槽

插槽名为：popList

你可以通过如下方式获取到消息列表：

this.$FChat.getMessage()
//或者使用插槽的返回值,也可以拿到消息列表
<FonlineConsultation  @send="sendMsg" @sendImg="sendImg" @sendVoice="senVoice">
    <template v-slot:popList ="List">
        {{List}}
    </template>
</FonlineConsultation>

音频开启方法

为了多端兼容使用Recorder.js插件，关于Vue使用Recorder.js的demo可参照样例

直接引入到main.js，可通过this.$Recorder调用相关api

import './node_modules/fonlineconsultation/packages/recorder.js';

在需要的.vue中调用此方法并键入微信授权/下载素材的url

created(){
   this.$FChat.openVoice("https://fepic.natapp4.cc/api/getSign", true);
}

FChart类

可修改属性 - 通过setConfig修改

maxSize - 图片最大大小(默认为2M)
onlyImg - 是否只允许发图片(默认为图片+视频都可以发送)
ToastTop - 如果该插件在你的项目中并非全屏显示，则需要传入该插件距顶部所差高度，用于响应式计算，请务必将插件置于页面最底，防止出现输入法弹出后的高度计算问题

//比如项目上有个header,高度为100，则这样做即可
this.$FChat.setConfig('ToastTop',100);

方法一览(*为常用)

方法	作用	参数
openVoice*	修改微信地址和授权	url - 服务器地址(微信授权+下载素材) isPromise - 是否自动进行音频授权
setConfig*	设置基本属性	key - 要修改的属性名 value - 修改为 config - 对象形式(和上面二选一)
getLoading	获取当前loading状态	null
loading*	显示全屏loading	time - 显示时长 loadingId - 自定义loading的id(display切换显示隐藏)，没有可不传texDisabled - 文本框在loading状态下是否disabled，默认false
cancelLoading*	取消loading状态	loadingId - 自定义loading的id(display切换显示隐藏)，没有可不传
scrollMessage*	滚动到消息框最底部	null
delMessage	清空消息框(input)	null
setMessageList*	渲染返回的消息列表(格式要为指定格式)	arr - 消息列表 handleFuc - 可自定该如何处理(默认为直接渲染)
getMessage*	获取消息列表	null
addMessage	获取普通消息对象	msg - 内容 pos - 方位(left / right)
addImage	获取图片对象	pos - 方位
sendMessage*	发送图片/文字消息，渲染	FchatObj - 即消息对象
playVoice*	开始录音，返回promise	null
pauseVoice*	停止录音，返回promise，包含blob和duration	null
sendVoice*	发送音频消息，渲染	content - blob对象/音乐网址等auto可以读取的 pos - 方位 duration - 音频持续时间
playVoice*	播放音频	src - 音频链接/blob等audio支持的格式 duration - 持续时间
createToast*	创建提示框(顶部)	msg - 提示消息 timer - 持续时间

Demo

Vue样例

注意

由于h5本身自带的长按复制功能，按钮长按后会出现选中文本导致失效，所以在长按事件中加入了禁止长按复制功能(松开后自动取消)，但仅仅限制了该插件的范围，可通过传入preventId属性来增大限制范围防止误选中，主要使用user-select等属性进行控制。

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
public		public
server		server
src		src
.browserslistrc		.browserslistrc
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
README.md		README.md
babel.config.js		babel.config.js
package-lock.json		package-lock.json
package.json		package.json
vue.config.js		vue.config.js

Negronis/FChatDemo

Folders and files

Latest commit

History

Repository files navigation

demo运行

FChat使用手册：

目录

简介

安装

使用方法

数据结构

可配置参数

插槽

音频开启方法

FChart类

Demo

注意

About

Resources

Stars

Watchers

Forks

Languages