泡泡IM uniapp版聊天源码是一套完整的基于uniapp开发的聊天软件源码,可编译成微信小程序、安卓 IOS APP聊天软件、H5网页聊天室。uniapp聊天源码未加密,无外部依赖,可私有化部署,可二次开发。文档全面,接口丰富,方便二次开发或者对接现有项目。uniapp聊天源码一次收费,终身使用。
聊天软件主要通能
1、支持发语音、文字、图片、表情、录制视频
2、支持私聊、群聊
3、群聊支持建群、退群、解散群组、禁言、踢人、拉人进群、群备注等功能、管理员
4、个人信息支持更改昵称、头像、个性签名等
5、支持查看历史消息、离线消息
6、支持好友查找、好友申请、同意好友申请、拒绝申请、删除好友,好友备注
7、支持消息撤回,脏字过滤
8、支持通讯录,按字母顺序排列
9、离线消息栏推送能力
10、管理后台
聊天源码技术栈:
编辑器:HBuilderX
技术框架:uni-app + vue
后端:PHP 语言, ThinkPHP框架
即时通讯:WebSocket workerman
数据库:MySQL
Web服务器:Nginx 或 Apache
代码片段:
switch[checked]::before {
transform: scale(0, 0);
}
switch .wx-switch-input,
switch .uni-switch-input {
border: none;
padding: 0 24px;
width: 48px;
height: 26px;
margin: 0;
border-radius: 100rpx;
}
switch .wx-switch-input:not([class*="bg-"]),
switch .uni-switch-input:not([class*="bg-"]) {
background: #888888 !important;
}
switch .wx-switch-input::after,
switch .uni-switch-input::after {
margin: auto;
width: 26px;
height: 26px;
border-radius: 100rpx;
left: 0rpx;
top: 0rpx;
bottom: 0rpx;
position: absolute;
transform: scale(0.9, 0.9);
transition: all 0.1s ease-in-out 0s;
}
/* www.popoim.com */
switch .wx-switch-input.wx-switch-input-checked::after,
switch .uni-switch-input.uni-switch-input-checked::after {
margin: auto;
left: 22px;
box-shadow: none;
transform: scale(0.9, 0.9);
}
radio-group {
display: inline-block;
}
switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before,
switch.radius .uni-switch-input::after,
switch.radius .uni-switch-input,
switch.radius .uni-switch-input::before {
border-radius: 10rpx;
}
<template>
<view>
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor, isBack?'':'justify-end']">
<view class="action" @tap="BackPage" v-if="isBack">
<text class="cuIcon-back"></text>
<slot name="backText"></slot>
</view>
<view class="content" :style="[{top:StatusBar + 'px'}]">
<slot name="content"></slot>
</view>
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
StatusBar: this.StatusBar,
CustomBar: this.CustomBar,
networkState: {}
};
},
name: 'cu-custom',
computed: {
style() {
var StatusBar= this.StatusBar;
var CustomBar= this.CustomBar;
var bgImage = this.bgImage;
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
if (this.bgImage) {
style = `${style}background-image:url(${bgImage});`;
}
return style
}
},
props: {
bgColor: {
type: String,
default: ''
},
isBack: {
type: [Boolean, String],
default: false
},
bgImage: {
type: String,
default: ''
},
},
methods: {
BackPage() {
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style>
</style>
uniapp聊天效果截图