svelte-webchat（基于Svelte3+SvelteKit仿微信Mac网页界面聊天实例） svelte-webchat：基于Svelte3+Svelte

概述 Svelte-Webchat 一款仿制微信网页版类Mac界面聊天项目。使用最新技术栈svelte3.x+svelteKit+sass+mescroll+svelte-layer等技术开发构建。别致的dock可拖拽/左右滚动菜单。

功能特效 ?经典Dock可滚动菜单模式
?流畅的操作体验
?可收缩/展开侧边
?可全屏/恢复窗口、退出弹窗提示
?丰富的视觉效果，自定义桌面虚化主题
?自定义可视化弹窗+滚动条，支持各种自定义定制开发。

文章图片

技术栈

编辑器：Vscode
框架技术：Svelte^3.46.5+SvelteKit
状态管理：svelte/store
下拉刷新：mescroll.js
滚动条组件：svelte-scrollbar
对话框组件：svelte-layer
sass预处理：sass^1.50.1+svelte-preprocess

svelte-webchat（基于Svelte3+SvelteKit仿微信Mac网页界面聊天实例）

文章图片

文章图片

svelte-webchat 还内置了朋友圈模块。

项目结构非常清晰的分层目录结构。

文章图片

svelte自定义组件(弹窗+滚动条) 项目中无处不在的弹窗及滚动条功能，均是基于svelte.js自定义组件实现功能。

文章图片

svelte-layer 一款基于svelte3开发的网页对话框组件
https://segmentfault.com/a/1190000041721778
svelte-scrollbar 一款基于svelte.js虚拟美化滚动条组件
https://segmentfault.com/a/1190000041814107

由于之前有过相关分享文章，这里就不详细的介绍了。
svelte公共布局模板 svelteKit提供了__layout.svelte布局模板及__error.svelte错误处理页面。

文章图片

如上图：整体布局分为左侧+右侧内容区+底部dock菜单。

{#if $userinfo}{:else}{/if}

文章图片

{status} Error! 文章图片 ┗| {status} |┛Page Error~~ {error.message} 返回首页

svelte实现聊天聊天编辑框支持多行文本、光标处插入内容，粘贴截图发送图片+拖拽发送图片。

编辑框监听paste事件

editorEl.addEventListener('paste', function(e) { e.preventDefault()let cbd = e.clipboardData let ua = window.navigator.userAgent if(!(e.clipboardData && e.clipboardData.items)) returnif(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" && cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" && ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){ return; } for(var i = 0; i < cbd.items.length; i++) { var item = cbd.items[i] // console.log(item) // console.log(item.kind) if(item.kind == 'file') { var blob = item.getAsFile() if(blob.size === 0) return // 读取图片记录 var reader = new FileReader() reader.readAsDataURL(blob) reader.onload = function() { var imgpath = this.result// 返回图片给父组件 dispatch('paste', imgpath) } } } })

svelte拖拽上传

/** * svelte拖拽上传图片 * author:andy Q：282310962 */ function handleDragEnter(e) { e.stopPropagation() e.preventDefault() } function handleDragOver(e) { e.stopPropagation() e.preventDefault() } function handleDrop(e) { e.stopPropagation() e.preventDefault()handleFileList(e.dataTransfer) } // 拖拽文件列表 function handleFileList(filelist) { let files = filelist.files if(files.length >= 2) { svLayer.message({content: '暂时支持拖拽一张图片', icon: 'error', time: 0, xclose: true, shade: true}) return false } for(let i = 0; i < files.length; i++) { if(files[i].type != '') { handleFileAdd(files[i]) }else { svLayer.message({content: '目前不支持文件夹拖拽功能', icon: 'error', time: 0, xclose: true, shade: true}) } } } function handleFileAdd(file) { let len = msgList.length // 消息队列 let msgArr = { id: `msg_${++len}`, msgtype: 5, isme: true, avatar: '/uimg/img-avatar08.jpg', author: 'Hison', msg: '', imgsrc: '', videosrc: '' }if(file.type.indexOf('image') == -1) { svLayer.message({content: '目前不支持非图片拖拽功能', icon: 'error', time: 0, xclose: true, shade: true}) }else { let reader = new FileReader() reader.readAsDataURL(file) reader.onload = async function() { let img = this.resultmsgArr.imgsrc = https://www.it610.com/article/img msgList = msgList.concat(msgArr)await tick() scrollBottom() } } }

OK，基于svelte.js开发仿微信web版聊天实例就分享到这里。
【svelte-webchat（基于Svelte3+SvelteKit仿微信Mac网页界面聊天实例）】最后附上两个最新实例项目
https://segmentfault.com/a/1190000041357547
https://segmentfault.com/a/1190000040015181