svelte-chat仿微信app聊天室|svelte3.x+svelteKit聊天实例

svelte3.x-chat 基于svelte.js开发的仿微信app界面聊天实例项目。

使用了最新的svelte.js+svelteKit+mescroll.js+svelte-popup等技术搭建开发的仿微信app界面聊天项目。支持发送图文消息/gif动图、图片/视频预览、下拉刷新、红包及朋友圈等功能。

使用技术

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

svelte.js 前端黑马新框架。体积小、运行速度快、无虚拟DOM、快速的响应能力。
https://svelte.dev/

项目结构

其中lib是公共组件目录，routes页面路由目录，store状态管理目录。

svelte.js自定义navbar+tabbar+popup组件

使用svelte开发自定义组件，就不作过多的介绍，可以去看看这篇分享文章。

https://blog.csdn.net/yanxinyun1990/article/details/123439471

https://blog.csdn.net/yanxinyun1990/article/details/123563773

svelte公共配置文件

/**
 * svelte.config.js基础配置文件
 */

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

sveltekit公共模板

<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.js仿朋友圈

如下图：使用svelte+mescroll实现朋友圈转圈圈功能。

<!-- //朋友圈模板 -->
<script>
	/**
     * @Desc     Svelte.js仿朋友圈组件
     * @Time     andy by 2021-01
     * @About    Q：282310962  wx：xy190310
     */
    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>

Okay，今天就先分享到这里。希望大家可以学习起来哈~~

最后附上两个最近实例项目

• uni-app+uViewui移动端后台管理系统
  https://blog.csdn.net/yanxinyun1990/article/details/122654785

• uniapp+uview仿抖音短视频项目
  https://blog.csdn.net/yanxinyun1990/article/details/120387832