Svelte3-Chat: An example of imitating WeChat chat based on svelte+svelteKit+sass|svelte imitating WeChat

1. Introduction

The strong competitors of the three front-end frameworks svelte.js came out. It is said to be easier to use than vue.js, 无虚拟DOM、极速响应能力、编译及运行速度超快 . The star on github has reached 58K+ . Suffice it to say that it is worth learning.

svelte3-chat is based on svelte.js+svelteKit+sass+mescroll the imitation WeChat app interface chatting actual project.

2. Technology stack

• Encoder: VScode
• Framework technology: svelte^3.46.0+svelteKit
• Dropdown component: mescroll.js^1.4.2
• Style processing: sass+svelte-preprocess
• Popup component: svelte-popup
• Data mock: mockjs^1.1.0

Supports functions such as sending graphic messages/gifs, picture/video preview, pull-down refresh, red envelopes and circle of friends.

3. Project structure directory

svelte custom navigation bar Navbar/menu bar Tabbar

The top navigation bar and the bottom menu bar are custom components developed based on svelte.

I have shared an article before, you can read it.
https://segmentfault.com/a/1190000041539049

svelte implements pop-up window function

All pop-up window effects in the project are implemented by svelte custom components.

svelte-popup is based on Svelte3.x develop a custom multi-functional svPopup pop-up box component, which supports free configuration of more than 20+ parameters, and a mixed call method of component and function .

https://segmentfault.com/a/1190000041566666

svelte configuration file

It is also possible to use sass to write styles in svelte projects.

 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

public template

 <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 realizes the function of circle of friends

The circle of friends function has been added to the project, using svelte+mescroll to achieve the effect of circle circle.

 <!-- //朋友圈模板 -->
<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, the chat project based on svelte.js is shared here.

Finally, attach a uniapp development background system example project
https://segmentfault.com/a/1190000041357547