泡泡IM uniapp版聊天源碼是一套完整的基于uniapp開發(fā)的聊天軟件源碼，可編譯成微信小程序、安卓 IOS APP聊天軟件、H5網(wǎng)頁聊天室。uniapp聊天源碼未加密，無外部依賴，可私有化部署，可二次開發(fā)。文檔全面，接口豐富，方便二次開發(fā)或者對接現(xiàn)有項目。uniapp聊天源碼一次收費，終身使用。

聊天軟件主要通能
1、支持發(fā)語音、文字、圖片、表情、錄制視頻
2、支持私聊、群聊
3、群聊支持建群、退群、解散群組、禁言、踢人、拉人進群、群備注等功能、管理員
4、個人信息支持更改昵稱、頭像、個性簽名等
5、支持查看歷史消息、離線消息
6、支持好友查找、好友申請、同意好友申請、拒絕申請、刪除好友，好友備注
7、支持消息撤回，臟字過濾
8、支持通訊錄，按字母順序排列
9、離線消息欄推送能力
10、管理后臺

聊天源碼技術(shù)棧：
編輯器：HBuilderX
技術(shù)框架：uni-app + vue
后端：PHP 語言, ThinkPHP框架
即時通訊：WebSocket workerman
數(shù)據(jù)庫：MySQL
Web服務(wù)器：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聊天效果截圖

轉(zhuǎn)自 https://www.popoim.com/im/article/9