svelte3实战聊天|svelte+sveltekit+less仿微信APP实例

1,313 阅读1分钟

最近一直在学习前端新框架svelte.js。据说是号称比vue还快、运行体积小、无虚拟DOM。一轮学习下来发现还不错。语法比vue/react还简单,响应式能力极强。

Svelte3-Chatroom 基于svelte.js+svelteKit+less+mescroll等技术开发实现的仿微信app界面聊天实例项目。

技术栈

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

svelte-chat 支持发送图文emoj消息、图片/视频预览、红包/朋友圈等功能。

项目结构

公共模板

在routes目录下新建一个公共模板__layout.svelte

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

新建一个__error.svelte错误处理页面。

<!-- //Svelte错误页 -->
<script context="module">
    export function load({ error, status }) {
        return {
            props: { error, status }
        }
    }
</script>

<script>
    import Navbar from '$lib/Navbar'

    export let status
    export let error

    function goBack() {
        history.go(-1)
    }
</script>

<svelte:head>
    <title>404错误</title>
</svelte:head>

<Navbar title="Page Error!!!" />

<div class="sv__scrollview flex1">
    <div class="sv__page-error flexbox flex-col flex-alignc flex-justifyc">
        <div class="sv__page-error-img">
            <img src="404.png" alt="" />
        </div>
        <div class="sv__page-error-content">
            <div class="c-red fs-36">┗| {status} |┛ 嗷~~</div>
            <div class="c-999 mt-10">{error.message}</div>
            <div class="mt-20 sv__btn sv__btn-default" on:click={goBack}><i class="iconfont icon-arrL"></i> 返回首页</div>
        </div>
    </div>
</div>

项目中使用的svelte-popup弹窗组件,支持网址/图片/视频预览功能。

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

svelte3自定义移动端弹窗组件svelte-popup

svelte+mescroll实现朋友圈

使用svelte.js结合mescroll.js实现仿微信朋友圈转圈圈下拉刷新功能。

<!-- //朋友圈模板 -->
<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>

通过学习下来,感觉svelte.js语法确实比vue精简不少。而且编译速度杠杠滴,极快!!!

ok,今天的分享就到这里吧。后续还会分享一些svelte.js实例项目。

最后附上一个uniapp+uview开发手机后台管理系统

juejin.cn/post/705879…