关于svelte:Svelte3Chat基于sveltesvelteKitsass仿微信聊天实例svelte仿微信

一、介绍

前端三大框架的无力竞争者 svelte.js 问世啦。号称比 vue.js 还好用，无虚构 DOM、极速响应能力、编译及运行速度超快。github 下面 star 曾经达到58K+。足以证实值得一学。

svelte3-chat 基于 svelte.js+svelteKit+sass+mescroll 开发的仿微信 app 界面聊天实战我的项目。

二、技术栈

• 编码器：VScode
• 框架技术：svelte^3.46.0+svelteKit
• 下拉组件：mescroll.js^1.4.2
• 款式解决：sass+svelte-preprocess
• 弹窗组件：svelte-popup
• 数据模仿：mockjs^1.1.0

反对发送图文音讯 /gif 动图、图片 / 视频预览、下拉刷新、红包及朋友圈等性能。

三、我的项目构造目录

svelte 自定义导航栏 Navbar/ 菜单栏 Tabbar

顶部导航条及底部菜单栏均是基于 svelte 定制开发的自定义组件。

之前有分享过一篇文章，大家能够去看下。
https://segmentfault.com/a/1190000041539049

svelte 实现弹窗性能

我的项目中的所有弹窗成果，均是 svelte 自定义组件实现性能。

svelte-popup 一款基于 Svelte3.x 开发自定义多功能 svPopup 弹出框组件，反对超过 20+ 参数自在配置、组件式 + 函数式 混合调用形式。

https://segmentfault.com/a/1190000041566666

svelte 配置文件

在 svelte 我的项目中也能够应用 sass 编写款式。

npm i sass svelte-preprocess -D

/**
 * 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

公共模板

<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+mescroll 实现转圈圈成果。

<!-- // 朋友圈模板 -->
<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 开发聊天我的项目就分享到这里。

最初附上一个 uniapp 开发后盾零碎实例我的项目
https://segmentfault.com/a/1190000041357547