PHP 之CI框架+GatewayWorker+AmazeUI低仿微信聊天网页版
html5开发的仿微信网页版聊天，采用html5+css3+jquery+websocket+amazeui等技术混合架构开发，实现了微信网页版的主要功能。
更新
- 2019-01-07 新增发送图片与文件、下载功能
- 2019-01-05 新增群聊
源码地址：https://github.com/yangsphp/wechat-master
一、效果图
二、前端参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿微信电脑版聊天</title>
<link rel="stylesheet" href="css/amazeui.min.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="box">
<div class="wechat"> <div class="sidestrip">
<div class="am-dropdown" data-am-dropdown>
<!--头像插件-->
<div class="own_head am-dropdown-toggle"></div>
<div class="am-dropdown-content">
<div class="own_head_top">
<div class="own_head_top_text">
<p class="own_name">彭于晏丶plus<img src="data:images/icon/head.png" alt="" /></p>
<p class="own_numb">微信号：123456</p>
</div>
<img src="data:images/own_head.jpg" alt="" />
</div>
<div class="own_head_bottom">
<p><span>地区</span>江西 九江</p>
<div class="own_head_bottom_img">
<a href=""><img src="data:images/icon/head_1.png"/></a>
<a href=""><img src="data:images/icon/head_2.png"/></a>
</div>
</div>
</div>
</div>
<!--三图标-->
<div class="sidestrip_icon">
<a id="si_1" style="background: url(images/icon/head_2_1.png) no-repeat;"></a>
<a id="si_2"></a>
<a id="si_3"></a>
</div> <!--底部扩展键-->
<div id="doc-dropdown-justify-js">
<div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
<div class="sidestrip_bc am-dropdown-toggle"></div>
<ul class="am-dropdown-content" style="">
<li>
<a href="#" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
<div class="am-modal-dialog">
<div class="am-modal-hd">Modal 标题
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>×</a>
</div>
<div class="am-modal-bd">
Modal 内容。本 Modal 无法通过遮罩层关闭。
</div>
</div>
</div>
</li> <li><a href="#">备份与恢复</a></li>
<li><a href="#">设置</a></li>
</ul>
</div>
</div>
</div> <!--聊天列表-->
<div class="middle on">
<div class="wx_search">
<input type="text" placeholder="搜索"/>
<button>+</button>
</div>
<div class="office_text">
<ul class="user_list">
<li class="user_active">
<div class="user_head"><img src="data:images/head/15.jpg"/></div>
<div class="user_text">
<p class="user_name">早安无恙</p>
<p class="user_message">我是傻逼！，金少凯牛逼！</p>
</div>
<div class="user_time">下午 2：54</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/2.jpg"/></div>
<div class="user_text">
<p class="user_name">夏继涛</p>
<p class="user_message">[小程序]</p>
</div>
<div class="user_time">上午 11：03</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/3.jpg"/></div>
<div class="user_text">
<p class="user_name">十里老街秋名山车神车队</p>
<p class="user_message">乞讨两块交个话费</p>
</div>
<div class="user_time">昨天</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/4.jpg"/></div>
<div class="user_text">
<p class="user_name">阿杰</p>
<p class="user_message">[动画表情]</p>
</div>
<div class="user_time">昨天</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/5.jpg"/></div>
<div class="user_text">
<p class="user_name">订阅号</p>
<p class="user_message">庐山国际水彩艺术节：</p>
</div>
<div class="user_time">星期三</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/6.jpg"/></div>
<div class="user_text">
<p class="user_name">小龙网食品</p>
<p class="user_message">槟榔的100种吃法</p>
</div>
<div class="user_time">星期二</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/7.jpg"/></div>
<div class="user_text">
<p class="user_name">文件传输助手</p>
<p class="user_message"></p>
</div>
<div class="user_time">星期二</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/8.jpg"/></div>
<div class="user_text">
<p class="user_name">陈明杰</p>
<p class="user_message">妈的，你在聊我</p>
</div>
<div class="user_time">星期四</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/9.jpg"/></div>
<div class="user_text">
<p class="user_name">妈</p>
<p class="user_message">面</p>
</div>
<div class="user_time">星期四</div>
</li>
<li>
<div class="user_head"><img src="data:images/head/10.jpg"/></div>
<div class="user_text">
<p class="user_name">土豆</p>
<p class="user_message">[图片]</p>
</div>
<div class="user_time"></div>
</li>
<li>
<div class="user_head"><img src="data:images/head/11.jpg"/></div>
<div class="user_text">
<p class="user_name">Emmera</p>
<p class="user_message"></p>
</div>
<div class="user_time"></div>
</li>
<li>
<div class="user_head"><img src="data:images/head/12.jpg"/></div>
<div class="user_text">
<p class="user_name">彭于晏丶plus</p>
<p class="user_message">我送20个都他妈的能赢，这群鬼人真的恐怖</p>
</div>
<div class="user_time"></div>
</li>
</ul>
</div>
</div> <!--好友列表-->
<div class="middle">
<div class="wx_search">
<input type="text" placeholder="搜索"/>
<button>+</button>
</div>
<div class="office_text">
<ul class="friends_list">
<li>
<p>新的朋友</p>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/1.jpg"/></div>
<div class="friends_text">
<p class="user_name">新的朋友</p>
</div>
</div>
</li>
<li>
<p>公众号</p>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/2.jpg"/></div>
<div class="friends_text">
<p class="user_name">公众号</p>
</div>
</div>
</li>
<li>
<p>A</p>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/3.jpg"/></div>
<div class="friends_text">
<p class="user_name">彭于晏丶plus</p>
</div>
</div>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/4.jpg"/></div>
<div class="friends_text">
<p class="user_name">陈依依</p>
</div>
</div>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/5.jpg"/></div>
<div class="friends_text">
<p class="user_name">毛毛</p>
</div>
</div>
</li>
<li>
<p>B</p>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/6.jpg"/></div>
<div class="friends_text">
<p class="user_name">苏笑言</p>
</div>
</div>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/7.jpg"/></div>
<div class="friends_text">
<p class="user_name">往事不再提</p>
</div>
</div>
</li>
<li>
<p>C</p>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/8.jpg"/></div>
<div class="friends_text">
<p class="user_name">夏继涛</p>
</div>
</div>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/9.jpg"/></div>
<div class="friends_text">
<p class="user_name">早安无恙</p>
</div>
</div>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/10.jpg"/></div>
<div class="friends_text">
<p class="user_name">王鹏</p>
</div>
</div>
</li>
<li>
<p>D</p>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/11.jpg"/></div>
<div class="friends_text">
<p class="user_name">涨了潮了</p>
</div>
</div>
<div class="friends_box">
<div class="user_head"><img src="data:images/head/12.jpg"/></div>
<div class="friends_text">
<p class="user_name">Ktz丶中融资</p>
</div>
</div>
</li>
</ul>
</div>
</div> <!--程序列表-->
<div class="middle">
<div class="wx_search">
<input type="text" placeholder="搜索收藏内容"/>
<button>+</button>
</div>
<div class="office_text">
<ul class="icon_list">
<li class="icon_active">
<div class="icon"><img src="data:images/icon/icon.png" alt="" /></div>
<span>全部收藏</span>
</li>
<li>
<div class="icon"><img src="data:images/icon/icon1.png" alt="" /></div>
<span>链接</span>
</li>
<li>
<div class="icon"><img src="data:images/icon/icon2.png" alt="" /></div>
<span>相册</span>
</li>
<li>
<div class="icon"><img src="data:images/icon/icon3.png" alt="" /></div>
<span>笔记</span>
</li>
<li>
<div class="icon"><img src="data:images/icon/icon4.png" alt="" /></div>
<span>文件</span>
</li>
<li>
<div class="icon"><img src="data:images/icon/icon5.png" alt="" /></div>
<span>音乐</span>
</li>
<li>
<div class="icon"><img src="data:images/icon/icon6.png" alt="" /></div>
<span>标签</span>
</li>
</ul>
</div>
</div> <!--聊天窗口-->
<div class="talk_window">
<div class="windows_top">
<div class="windows_top_box">
<span>早安无恙</span>
<ul class="window_icon">
<li><a href=""><img src="data:images/icon/icon7.png"/></a></li>
<li><a href=""><img src="data:images/icon/icon8.png"/></a></li>
<li><a href=""><img src="data:images/icon/icon9.png"/></a></li>
<li><a href=""><img src="data:images/icon/icon10.png"/></a></li>
</ul>
<div class="extend" class="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
<!-- 侧边栏内容 -->
<div id="doc-oc-demo3" class="am-offcanvas">
<div class="am-offcanvas-bar am-offcanvas-bar-flip">
<div class="am-offcanvas-content">
<p><a href="http://music.163.com/#/song?id=385554" target="_blank">网易音乐</a></p>
</div>
</div>
</div>
</div>
</div> <!--聊天内容-->
<div class="windows_body">
<div class="office_text" style="height: 100%;">
<ul class="content" id="chatbox">
<li class="me"><img src="data:images/own_head.jpg" title="金少凯"><span>疾风知劲草，板荡识诚臣</span></li>
<li class="other"><img src="data:images/head/15.jpg" title="张文超"><span>勇夫安知义，智者必怀仁</span></li>
</ul>
</div>
</div> <div class="windows_input" id="talkbox">
<div class="input_icon">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<div class="input_box">
<textarea name="" rows="" cols="" id="input_box"></textarea>
<button id="send">发送（S）</button>
</div>
</div>
</div>
</div>
</div> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/zUI.js"></script>
<script type="text/javascript" src="js/wechat.js"></script> <script type="text/javascript">
//三图标
window.onload=function(){
function a(){
var si1 = document.getElementById('si_1');
var si2 = document.getElementById('si_2');
var si3 = document.getElementById('si_3');
si1.onclick=function(){
si1.style.background="url(images/icon/head_2_1.png) no-repeat"
si2.style.background="";
si3.style.background="";
};
si2.onclick=function(){
si2.style.background="url(images/icon/head_3_1.png) no-repeat"
si1.style.background="";
si3.style.background="";
};
si3.onclick=function(){
si3.style.background="url(images/icon/head_4_1.png) no-repeat"
si1.style.background="";
si2.style.background="";
};
};
function b(){
var text = document.getElementById('input_box');
var chat = document.getElementById('chatbox');
var btn = document.getElementById('send');
var talk = document.getElementById('talkbox');
btn.onclick=function(){
if(text.value ==''){
alert('不能发送空消息');
}else{
chat.innerHTML += '<li class="me"><img src="'+'images/own_head.jpg'+'"><span>'+text.value+'</span></li>';
text.value = '';
chat.scrollTop=chat.scrollHeight;
talk.style.background="#fff";
text.style.background="#fff";
};
};
};
a();
b();
};
</script> </body>
</html>
2019-01-07
PHP 之CI框架+GatewayWorker+AmazeUI低仿微信聊天网页版的更多相关文章
- iOS 即时通讯 + 仿微信聊天框架 + 源码
这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感 ...
- uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...
- Android -- 真正的 高仿微信 打开网页的进度条效果
(本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...
- CSS3 仿微信聊天小气泡
今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...
- web版仿微信聊天界面|h5仿微信电脑端案例开发
前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...
- h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器
之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...
- HTML5仿微信聊天界面、微信朋友圈实例
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...
- Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面
一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...
- CI框架 QQ接口（第三方登录接口PHP版）
本帖内容较多,大部分都是源码,要修改的地方只有一个,其他只要复制过去,就可以完美运行.本帖主要针对CI框架,不用下载SDK,按我下面的步骤,建文件,复制代码就可以了.10分钟不要,接口就可完成.第一步 ...
随机推荐
- CentOS && Ubuntu 环境下 Docker 的安装配置
CentOS 7 install Docker Docker 支持的 centos 版本:CentOS 6.5(64-bit)或更高的版本 使用 yum 安装 1)确保 yum 包更新到最新 [roo ...
- ubuntu下使用JNI Java调用C++的例子
TestJNI.java public class TestJNI { static{ System.load("/home/buyizhiyou/workspace/JNI/src/lib ...
- Android应用查看本地数据库
使用Android Studio 视图==>工具窗口 == >Device File Explorer ==> 文件在 data/data目录下,你的应用程序报名,右键save as ...
- java - day013 - 流, FileInputStream, BufferedInputStream,
流 Stream 把数据的读写,抽象成数据在管道中流动. 流是单向的 输入流, 只能用来读取数据 输出流, 只能用来输出数据 流只能顺序读写数据 流只能一次性从头到尾读写数据 流动过的数据,不能反复流 ...
- microsoft office 2007 在已经安装pdf maker的情况下另存为没有adobe pdf选项
通常,此类情况是pdf maker 插件被禁用导致,点击office 2007左上角菜单栏,选项,加载项,在管理处选择禁用项目, 找到acrobat pdf maker office com addi ...
- ArrayList之foreach循环删除倒数第二个元素，不触发fail-fast机制
今天一朋友问了个问题,对于如下一段代码,运行后会有怎样的结果? public class ArrayListTest { public static void main(String[] args) ...
- osi七层网络模型（一）
在网络中OSI分为七层网络模型,怎么理解七层模型呢?简单理解我们的手机都有手机壳.屏幕.摄像头.电池.芯片等很多原件,每个原件都是由不同的 厂家生产,最终组装成了一部功能完整的手机,同样,在网络中,也 ...
- lua游戏开发易错踩坑录
一.local local函数一定要在调用之前定义(切记,不然会报错或者不能调用该函数) 情况1:监听调此函数后定义 base.model:addlistener("被监听的函数" ...
- golang Methods on structs
原文:http://golangtutorials.blogspot.com/2011/06/methods-on-structs.html snmp 下载,有空学习一下! https://sourc ...
- ArcGIS + Python 批量裁剪、添加X/Y坐标脚本
前言 前一段时间,同事拿来的数据范围太大,用不了那么多(只需要一个乡镇的,结果拿来区县的),太多了加载也是问题.所以就让我给处理下. 由于文件较多,手动裁剪的话,我一个一个用ArcGIS工具箱中的工具 ...