最近一直在学习前端新框架svelte.js，今天给大家分享基于svelte全新研发的仿微信聊天项目svelte3-chat。

svelte3-chat 基于svelte3+svelteKit+mescroll.js+svelte-popup构建的仿微信app界面聊天项目。

支持发送图文消息、gif动图、图片/视频预览、下拉刷新加载、红包及朋友圈等功能。

技术栈

采用了最新的svelte框架技术进行编码开发。

• 编辑器：VScode
• 框架技术：svelte^3.46.0+svelteKit
• 下拉组件：mescroll.js^1.4.2
• 样式处理：sass+svelte-preprocess
• 弹窗组件：svelte-popup
• 数据模拟：mockjs^1.1.0

项目结构

svelte自定义导航条/菜单栏/弹窗

之前有过一篇分享文章，这里不过多地介绍了。

https://www.cnblogs.com/xiaoyan2017/p/15996146.html

如上图：基于svelte.js开发的手机端弹窗组件svelte-popup。

https://www.cnblogs.com/xiaoyan2017/p/16015575.html

在svelte项目中使用sass/less编写样式非常简单，只需安装如下两个依赖并配置即可。

npm i sass svelte-preprocess -S

在svelte.config.js配置文件中引入svelte-preprocess。

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')                }            }        }    },    // allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.    preprocess: SvelteProcess()};export default config

svelte公共模板

基于svelteKit构建的项目，会有一个公共模板__layout.svelte页面。

<script>    import { onMount } from 'svelte'    import { page } from '$app/stores'    import { goto } from '$app/navigation'    import { userinfo } from '@/store/index.js'    let whiteRoute = ['/auth/login', '/auth/register']    onMount(() => {        if(!$userinfo) {            goto('/auth/login')        }else {            if(whiteRoute.includes($page.url.pathname)) {                goto('/')            }else {                goto($page.url.pathname)            }        }    })</script><div class="sv__container flexbox flex-col">    <slot /></div><style>    @import '@/app.scss';    @import '@assets/css/reset.scss';    @import '@assets/css/layout.scss';    @import '@assets/fonts/iconfont.css';</style>

svelte仿朋友圈功能

使用svelte.js+mescroll.js实现朋友圈及下拉转圈圈功能。

<!-- //仿微信朋友圈 --><script>    import { onMount } from 'svelte'    import Navbar from '$lib/Navbar'    import MeScroll from 'mescroll.js/mescroll.min.js'    import 'mescroll.js/mescroll.min.css'    onMount(() => {        let mescroll = new MeScroll('mescroll', {            down: {                auto: false,                offset: 40,                callback: downCallback            },            // up: {            //     callback: upCallback            // }        })        // 下拉刷新的回调        function downCallback() {            console.log('下拉刷新...')            setTimeout(() => {                // 隐藏下拉刷新的状态;                mescroll.endSuccess()            }, 2000)        }        // 上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10        function upCallback(page) {            console.log('上拉加载...')            var pageNum = page.num; // 页码, 默认从1开始            var pageSize = page.size; // 页长, 默认每页10条        }    })        // ...</script><Navbar title="朋友圈" center transparent>    <svelte:fragment slot="right">        <div><i class="iconfont icon-tupian"></i></div>        <div class="ml-30"><i class="iconfont icon-fabu"></i></div>    </svelte:fragment></Navbar><div class="sv__scrollview flex1">    <div id="mescroll" class="mescroll">        <div>            <div class="sv__uzone">                ...            </div>        </div>    </div></div>

OK，基于svelte.js+svelteKit开发App聊天项目就分享到这里。

如果大家感兴趣的话，赶紧学习起来吧。