概述
svelte-webchat一款基于svelte3.x+svelteKit+sass+mescroll.js等技术开发的仿macOs微信聊天界面实例,全新Dock风格菜单/毛玻璃背景虚化效果。
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/fd8e0730-7db7-49bf-9221-ab4317c9e826.jpg)
技术栈
- 框架技术:svelte^3.46.5+svelteKit
- 状态管理:svelte/store
- 下拉刷新:mescroll.js
- iconfont图标:阿里巴巴字体图标库
- 自定义滚动条:svelte-scrollbar
- 自定义弹窗:svelte-layer
- sass/less预处理:sass^1.50.1+svelte-preprocess
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/3122445c-8b4b-4dc9-9cae-d4ec6baf0b0c.jpg)
项目结构
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/72d3abdb-e18a-46fd-982e-a01a3e703fa3.jpg)
预览版
Svelte.js框架
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/bd54cdcf-072c-4809-8238-3bf5d7e0d9c7.jpg)
svelte.js一款新的前端框架。无虚拟DOM、极速响应能力。start高达58K+。
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/dc1dbab2-0c20-40ba-8e20-de0ad12a0d01.jpg)
号称是比Vue.js还快、语法还精简、编译/运行速度还快。
https://github.com/sveltejs/svelte
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/3da3e0e8-9f43-4085-a997-85ba8f63f4af.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/4a7601be-1657-453d-a346-e285b11dcd10.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/bdb8faee-2926-4ad2-aea8-0731e87f3cd7.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/c8fdc476-9626-49f9-b2a7-bc5a96d1b597.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/bee6555f-def4-4a02-be60-58f4d81a89e2.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/fda10081-1140-4660-836e-2ff533482214.jpg)
svelte.config.js配置
配置一些alias路径、sass预编译等功能。
import adapter from '@sveltejs/adapter-auto'
import path from 'path'
import SvelteProcess from 'svelte-preprocess'
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
vite: {
resolve: {
alias: {
'@': path.resolve('./src'),
'@assets': path.resolve('./src/assets'),
'@utils': path.resolve('./src/utils')
}
}
}
},
// 禁用 Svelte 警告 未使用的 CSS 选择器(css-unused-selector)
onwarn: (warning, handler) => {
const { code, frame } = warning
if (code === "css-unused-selector")
return
handler(warning)
},
preprocess: SvelteProcess()
};
export default config;
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/f3304031-a736-4e0f-9a72-27f6713bc8a0.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/c692c4be-25d3-4f31-838b-23f3f073f2b9.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/08934c99-f1c2-4af2-ac65-acba3a98a901.jpg)
svelte.js公共布局模板
svelte.js虽说没有vue里面的router-view,但是svelteKit提供了类似的__layout.svelte模板布局及__error.svelte错误页。
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/f934623c-871b-4601-8306-04e4b30d87be.jpg)
<div class="sv__container flexbox flex-alignc flex-justifyc" style="--themeSkin: {$skin}">
<div class="sv__wrapper" class:maximize={$isWinMaximize}>
{#if $userinfo}
<div class="sv__board flexbox flex-col">
<!-- <div class="sv__topbar">顶部模块</div> -->
<div class="sv__mainwrap flex1 flexbox">
<!-- <div class="sv__sidebar">侧边栏</div> -->
<Middle />
<div class="sv__mainbx flex1 flexbox flex-col">
<Winbar />
<slot />
</div>
</div>
<Dock />
</div>
{:else}
<div class="sv__board flexbox flex-col">
<div class="sv__mainwrap flex1 flexbox">
<slot />
</div>
</div>
{/if}
</div>
</div>
__error.svelte错误页
<!-- //Svelte错误页 -->
<script context="module">
export function load({ error, status }) {
return {
props: { error, status }
}
}
</script>
<script>
import { goto } from '$app/navigation'
export let status
export let error
function goBack() {
// history.go(-1)
goto('/')
}
</script>
<svelte:head>
<title>{status} Error!</title>
</svelte:head>
<div class="sv__scrollview flex1">
<div class="sv__page-error flexbox flex-col flex-alignc flex-justifyc">
<div class="sv__page-error-img">
<img src="404.png" alt="" />
</div>
<div class="sv__page-error-content">
<div class="c-red fs-18">┗| {status} |┛ Page Error~~</div>
<div class="c-999 mt-10">{error.message}</div>
<div class="sv__btn sv__btn-default" style="color:#40b3ff;height:32px;width:120px;" on:click={goBack}><i class="iconfont icon-arrL"></i> 返回首页</div>
</div>
</div>
</div>
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/28674063-5366-40e1-980a-33acfde947b3.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/3901ef83-cab0-4ddb-b91e-c237d6df7d57.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/50422d1d-281e-467c-b968-e73abc2161ab.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/0bfa39ff-f40c-4456-8564-c1904e5790d4.jpg)
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/5ab691c3-4743-403b-a052-2b098a18174b.jpg)
整个项目,连同弹窗都采用了毛玻璃背景虚化效果。
svelte.js自定义组件
大家看到的弹窗及滚动条均是基于svelte.js自定义组件实现功能。
svelte组件系列:svelte3.x自定义pc端弹窗组件svelteLayer
svelte组件系列:svelte3自定义虚拟滚动条SvelteScrollbar
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/7d2f1dd8-3788-4dbe-906d-18e08b234ba4.jpg)
Okay,使用svelte.js开发桌面PC版聊天实例就先分享这么多。
欢迎小伙伴们一起留言交流讨论哈~~
文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/sveltejs%20web%20version%20chat%20%20sveltesvelteKitsass%20imitation%20WeChat%20chat%20example.html
评论列表(196条)
测试