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

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

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

项目地址：jwchat-码云

效果对比图：

实现思路：

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

界面拆分

登陆界面

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

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

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

主体聊天界面窗口

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

聊天界面

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

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

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