electron仿微信客户端—设计与实现（已开源）

基于electorn构建的仿微信PC客户端

之前一直对web开发跨平台应用比较感兴趣，一次无意中看到 electorn ，觉得挺有意思，想写个小项目用于学习和练手

项目地址：jwchat-码云

效果对比图：

实现思路：

使用 electorn-vue 脚手架实现快速创建项目，搭配 ElementUI，香

界面拆分

登陆界面

登陆界面使用微信风格，添加传统账号密码输入框

先使用过渡动画，隐藏登陆表单，显示文字，然后在做切换

标题栏需要自己实现，设置css样式为 -webkit-app-region: drag; 即可使用鼠标对窗口进行拖拽，切记，例如标题栏的关闭窗口等需要操作的图标，需要去除拖拽属性 -webkit-app-region: no-drag;

主体聊天界面窗口

按照以上列表分块实现各个部分样式即可，主窗体各个功能切换使用路由跳转实现，点击左侧导航栏对中间窗体进行切换

聊天界面

聊天界面最重要的部分在于消息输入框，需要支持 文件、文字、图片、图文混合、表情包

contenteditable='true' 这个属性，把普通div标签变成可编辑的输入区域，详细实现见代码，支持图文混合，表情，文件选择，通过向输入框的div可编辑标签内插入自定义代码块，可以实现各种内容显示在输入框内

其他功能正在完善，长期更新

electron仿微信客户端—设计与实现（已开源）相关推荐

html5+css3界面设计，仿微信支付设计数字键盘
html5+css3界面设计,仿微信支付设计数字键盘可以增加数字,删除数字,可以提交效果图如下: 部分代码: <!DOCTYPE html> <html> <head ...
[Android] Android 手机下仿微信客户端界面 -- 微聊
Android 手机下仿微信客户端界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...
vue3-tauri-chat：基于tauri聊天实例|tauri仿微信客户端
Vue3.js+Tauri桌面端聊天实例|tauri仿微信/QQ聊天TauriChat. 基于tauri+vite3.x+vue3+element-plus等技术开发客户端仿微信/QQ聊天实战案例.实 ...
vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
react仿微信web版聊天室|仿微信客户端react版
基于react+react-dom+react-router-dom+redux+react-redux+webpack+nodeJs等技术混合开发的手机端仿微信界面聊天室--reactChatRoo ...
electron仿微信截图工具（初学者的尝试笔记）
刚刚学习election,心血来潮做些小工具,工具包含常用的矩形.椭圆框线,箭头绘制,笔刷以及文字. 支持框选截图范围后拖动以及裁剪. 大多都是查找网上大佬提供的思路,其中箭头绘制来自大佬代码魔改如何 ...
高仿精仿微信客户端源码完整版
给大家分享一款现在非常流行,又受欢迎的源码,该源码十分难得,希望大家下载学习一下,升级功能一下. 源码下载: http://android.662p.com/thread-47-1-1.html
rn 实现上下滑动选择列表_用大前端技术实现的一款仿Boss直聘app（已开源）
鱼哥从去年8月我参加GDD(谷歌开发者大会)后,Flutter在一年中,版本迭代频繁,很多没有的功能都逐渐有了,很多从事移动端开发的,目前面临巨大冲击,因为大前端不是喊口号,而是确实能有巨大优势.之前 ...
仿酷狗音乐播放器已开源！
转载请说明原出处,谢谢:http://blog.csdn.net/zhuhongshu/article/details/41037875 距离我发布测试版的Redrain音乐盒(仿酷狗播放器),现在正 ...