uni-App聊天功能的源码

前言

泡泡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

Css 代码片段：

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;
}

h5+JS代码片段

<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>

页面展现：

大家可以去试一试，挺简单的