svelte3聊天室|svelte sveltekit仿微信聊天实例|svelte.js开发app -凯发娱发k8

基于svelte3.x sveltekit构建仿微信app聊天应用svelte-chatroom。

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

一、技术框架

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

svelte.js 一款号称比vue.js还快的前端新框架。体积小、运行速度快、无虚拟dom、快速的响应能力。

https://svelte.dev/

二、项目结构目录

使用svelte sveltekit构建的项目，目录结构如下。

◆ svelte.js自定义导航栏navbar 菜单栏tabbar

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

至于如何使用svelte开发自定义组件，就不作过多的介绍，大家感兴趣的话，可以去看看这篇分享文章。

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

◆ svelte.js自定义手机端弹窗组件

svelte-popup 一款基于svelte3.x开发自定义多功能svpopup弹出框组件，支持超过20 参数自由配置、组件式 函数式混合调用方式。

具体的实现步骤这里不作详细介绍，大家可以去看看下面这篇分享文章。

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

◆ svelte.config.js配置文件

如何在svelte.js项目中使用sass/less编写样式？可以安装 sass 及 svelte-preprocess 依赖。

/**

 * 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公共模板及错误页

使用sveltekit构建的项目，公共模板__layout.svelte及错误页__error.svelte配置如下。

    





    


        


            

        


        


            
┗| {status} |┛ 嗷~~


            
{error.message}


            
 返回凯发娱发k8首页


        


    

◆ svelte.js状态管理 本地存储

svelte框架也提供了创建状态管理svelte/store，配置localstorage本地化存储服务。

/**

 * svelte状态管理

*/
import { writable } from 'svelte/store'
const createstore = (value, key) => {

    const { subscribe, set, update } = writable(value)

    return {

        // 持久化存储

        usestorage: () => {

            const data = localstorage.getitem(key)

            if(data) {

                set(json.parse(data))

            }

            // 订阅

            subscribe(val => {

                [null, undefined].includes(val) ? localstorage.removeitem(key) : localstorage.setitem(key, json.stringify(val))

            })

        },

        subscribe,

        set,

        update,

    }

}
export const userinfo = createstore(localstorage.getitem('userinfo')||null, 'userinfo')

◆ svelte.js实现仿朋友圈下拉刷新

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

    

        


        


    




    


        


            


                ...

            


        


    

◆ svelte实现聊天功能

聊天页面文本框支持文字 emoj混排，光标处插入表情、网址/图片/视频预览、红包等功能。并且底部文本框单独抽离了一个editor.svelte组件。

    class="editor"

    bind:this={editornode}

    contenteditable="true"

    bind:innerhtml={editor}

    on:input={handleinput}

    on:click={handleclick}

    on:focus={handlefocus}

    on:blur={handleblur}

    style="user-select: text; -webkit-user-select: text;"

>