泡泡IM uniapp版聊天源碼是一套完整的基于uniapp開發(fā)的聊天軟件源碼蟆豫，可編譯成微信小程序、安卓 IOS APP聊天軟件公罕、H5網(wǎng)頁(yè)聊天室谷暮。uniapp聊天源碼未加密筷厘，無(wú)外部依賴氮发，可私有化部署榜旦，可二次開發(fā)。文檔全面竟闪，接口豐富，方便二次開發(fā)或者對(duì)接現(xiàn)有項(xiàng)目杖狼。uniapp聊天源碼一次收費(fèi)炼蛤，終身使用。
聊天軟件主要通能
1蝶涩、支持發(fā)語(yǔ)音理朋、文字絮识、圖片、表情嗽上、錄制視頻
2次舌、支持私聊、群聊
3兽愤、群聊支持建群彼念、退群、解散群組浅萧、禁言逐沙、踢人、拉人進(jìn)群洼畅、群備注等功能吩案、管理員
4、個(gè)人信息支持更改昵稱帝簇、頭像徘郭、個(gè)性簽名等
5、支持查看歷史消息丧肴、離線消息
6残揉、支持好友查找、好友申請(qǐng)闪湾、同意好友申請(qǐng)冲甘、拒絕申請(qǐng)、刪除好友途样，好友備注
7江醇、支持消息撤回，臟字過(guò)濾
8何暇、支持通訊錄陶夜，按字母順序排列
9、離線消息欄推送能力
10裆站、管理后臺(tái)
聊天源碼技術(shù)棧：
編輯器：HBuilderX
技術(shù)框架：uni-app + vue
后端：PHP 語(yǔ)言, ThinkPHP框架
即時(shí)通訊：WebSocket workerman
數(shù)據(jù)庫(kù)：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
