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

基于electorn构建的仿微信PC客户端之前一直对web开发跨平台应用比较感兴趣，个人爱好广泛，也喜欢经常自己写点小工具之类的提升效率，一次无意中看到 electorn ，觉得挺有意思，想写个小项目用于学习和练手项目地址：jwchat-码云效果对比图：实现思路：使用 electorn-vue 脚手架实现快速创建项目，搭配 ElementUI，香界面拆分登陆界面登陆界面使用微信风格，添加传统账号密

旅人_

4122人浏览 · 2020-08-18 15:06:59

旅人_ · 2020-08-18 15:06:59 发布

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

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

项目地址：jwchat-码云

效果对比图：

在这里插入图片描述

实现思路：

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

界面拆分

登陆界面

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

在这里插入图片描述
先使用过渡动画，隐藏登陆表单，显示文字，然后在做切换

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

主体聊天界面窗口

在这里插入图片描述

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

在这里插入图片描述

聊天界面

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

在这里插入图片描述
contenteditable='true' 这个属性，把普通div标签变成可编辑的输入区域，详细实现见代码，支持图文混合，表情，文件选择，通过向输入框的div可编辑标签内插入自定义代码块，可以实现各种内容显示在输入框内
在这里插入图片描述
其他功能正在完善，长期更新

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^