Svelte3-Chat：基於svelte+svelteKit+sass仿微信聊天例項|svelte仿微信

xiaoyan2017發表於2022-04-08

一、介紹

前端三大框架的有力競爭者 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定製開發的自定義元件。

image.png

之前有分享過一篇文章，大家可以去看下。
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

相關文章