程序员经验分享-hwhale

Svelte3聊天室

2023-11-14

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
基于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://blog.csdn.net/xiaoyan2017/p/15996146.html

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

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

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

https://blog.csdn.net/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配置如下。

<span style="color: rgba(0, 0, 0, 1)">
 import { onMount } from </span>'svelte'<span style="color: rgba(0, 0, 0, 1)">
 import { page } from </span>'$app/stores'<span style="color: rgba(0, 0, 0, 1)">
 import { goto } from </span>'$app/navigation'<span style="color: rgba(0, 0, 0, 1)">
 import { userinfo } from </span>'@/store/index.js'<span style="color: rgba(0, 0, 0, 1)">

 let whiteRoute </span>= ['/auth/login', '/auth/register'<span style="color: rgba(0, 0, 0, 1)">]

 onMount(() </span>=><span style="color: rgba(0, 0, 0, 1)"> {
 </span><span style="color: rgba(0, 0, 255, 1)">if</span>(!<span style="color: rgba(0, 0, 0, 1)">$userinfo) {
 goto(</span>'/auth/login'<span style="color: rgba(0, 0, 0, 1)">)
 }</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
 </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(whiteRoute.includes($page.url.pathname)) {
 goto(</span>'/'<span style="color: rgba(0, 0, 0, 1)">)
 }</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
 goto($page.url.pathname)
 }
 }
 })
</span>


 


<span style="color: rgba(0, 0, 0, 1)">
 @import </span>'@/app.scss'<span style="color: rgba(0, 0, 0, 1)">;
 @import </span>'@assets/css/reset.scss'<span style="color: rgba(0, 0, 0, 1)">;
 @import </span>'@assets/css/layout.scss'<span style="color: rgba(0, 0, 0, 1)">;
 @import </span>'@assets/fonts/iconfont.css'<span style="color: rgba(0, 0, 0, 1)">;
</span>


<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.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 实现仿朋友圈下拉转圈功能。


<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实现聊天功能

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

<script>
    /**
 * @Desc Svelte.js实现聊天框组件
 * @Time andy by 2021-01
 * @About Q：282310962 wx：xy190310
 */
    
    // 编辑器内容
 export let editor

 import { tick, createEventDispatcher } from 'svelte'
 const dispatch = createEventDispatcher()

 let editorNode
 let lastCursor = null

    // 获取光标最后位置
    function getLastCursor() {
 let sel = window.getSelection()
 if(sel && sel.rangeCount > 0) {
 return sel.getRangeAt(0)
 }
 }

 // 光标位置插入内容
 export async function addHtmlInCursor(html) {
 // ...
 }

 // 删除编辑器内容
 export async function deleteHtml() {
 let range
 let sel = window.getSelection()
 if(lastCursor) {
 sel.removeAllRanges()
 sel.addRange(lastCursor)
 }
 range = getLastCursor()
 range.collapse(false)
 document.execCommand('delete')

 await tick()
 editorNode.blur()
 }

 function handleInput() {
 editor = editorNode.innerHTML
 lastCursor = getLastCursor()
 }

 function handleClick() {
 dispatch('click')
 lastCursor = getLastCursor()
 }

 function handleFocus() {
 dispatch('focus')
 lastCursor = getLastCursor()
 }

 function handleBlur() {
 dispatch('blur')
 }
script>

<div
 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;"
>div>

以上就是基于svelte.js+svelteKit开发仿微信app界面聊天实例的一些分享，希望对大家有所帮助！

最后附上一个uniapp+uview-ui开发移动端后台管理系统

https://blog.csdn.net/xiaoyan2017/p/15836112.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

python

计算机

Svelte3聊天室 的相关文章

随机推荐

  • Vue自定义指令的使用详解

    自定义指令 vue官方提供了v text v for v model v if等常用的指令 还允许开发者自定义指令 在使用自定义指令前 须在自定义名称前加v 名称 私有自定义指令

  • android audio/linux alsa音频-硬件

    接着以前的文章继续写音频方面的分析 因为学得快忘得也快 如果不加以总结和记录 很快自己也不记得了 要完全了解一个音频器件 如ES8396 wm8998 首先得了解它的硬件原理 一般在嵌入式领域 音频的编解码芯片主要有两种 1 在单片机应用方

  • I/O接口

    I O接口 结构和作用 数据缓冲寄存器DBR 暂存即将输入输出的数据 主机和外设的速度匹配 状态 控制寄存器 命令字 CPU对设备发出的具体命令 状态字 设备的状态信息 供CPU检查 串 并转换机构 数据格式的转换 I O控制逻辑 根据命令

  • 网络QoS解决方案

    网络QoS解决方案 在网络带宽不足时 对网络流量做区别服务 优先传输那些重要的 要求网络延迟小的 如果丢弃会导致更大业务代价的数据 并对不同应用的数据做合理的带宽分配与控制 如果一定需要丢弃一些数据 则丢弃那些代价比较低的 这就是网络 Qo

  • pnpm install出现：ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies

    使用 pnpm install 安装项目依赖时出现 ERR PNPM PEER DEP ISSUES Unmet peer dependencies 在 pnpm github issues 中找到相关解决方案 一 前言 完整日志 ERR

  • Git修改IP重新定位的方法

    进入已clone项目的 git文件夹 打开config文件 打开config 如图显示 修改url中的IP为192 168 6 102 然后保存 在项目上右击选择属性 R 然后选择Git 即可看到当前项目的跟踪远端网址 转载于 https

  • js vue上传文件判断文件格式 GIF JPG PNG

    根据文件识别头信息获取图片文件的类型 JPG 文件头标识 FF D8 文件尾标识 FF D9 PNG 文件头标识 8 bytes 89 50 4E 47 0D 0A 1A 0A GIF 文件头标识 6 bytes 47 49 46 38 3

  • 计算机二级试题及分值分布,计算机二级各部分分值分布

    计算机二级考试分选择题和操作题两大类 其中选择题10题 每题2分 一共20分 操作题分字处理题 电子表格题 演示文稿题三大类 其中字处理题30分 电子表格题30分 演示文稿题20分 共计80分 计算机二级各科目考试题型及分值 二级 MS O

  • java垃圾回收机制概述以及优缺点

    Java中的垃圾回收机制是自动内存管理的一部分 它负责在程序运行时自动回收不再使用的内存对象 以便为程序提供可用的内存空间 基于所谓的 垃圾收集器 它是Java虚拟机 JVM 的一部分 以下是Java垃圾回收机制的主要特点 1 对象生命周期

  • 教室管理系统（相关技术和设备：stm32、w5500、mqtt）

    背景 某学校对新建的实验楼有门禁管理需求 因此我们项目组借助KOB门锁 某宝销量较高的电吸锁和电插锁品牌 搭建了前端 微信小程序和网页 服务器 java服务器和mqtt服务器 单片机 基于stm32 用于控制电插锁 实现了一套完整的门禁管理

  • 关于RuoYi-Vue和ruoyi-vue-pro的基本使用理解

    文章目录 概要 前后端分离架构 技术栈 技术细节 小结 概要 提示 这里是本文概要 RuoYi Vue和ruoyi vue pro两个Web开源项目都是基于当下主流技术栈的前后端分离版本 后端采用SpringBoot多模块架构 前端使用Vu

  • 秋叶一键重装系统连接服务器失败,秋叶一键重装系统win7系统安装和使用DAEMONToolsLite的方法【图文教程】...

    DAEMON Tools Lite是一款虚拟光驱工具 装完不需启动即可用 是一个非常先进的模拟备份以及合并保护盘的软件 但是有部分win7秋叶系统用户还不知道要怎么安装和使用DAEMON Tools Lite 针对这个情况 小编这就给大家分

  • 保研日记v

    目录 个人情况 夏令营情况 预推免情况 希望能对学弟学妹们能有一定的参考价值 同样也是为了本科前三年画上一个句号 有问题可以直接留言哈 认识我的话可以直接小窗私戳我 即便困惑你的是很小的问题也希望大家能够勇敢的开口问 因为走了很多弯路 也在

  • 我优化了进度条，页面性能竟提高了70%

    前言 大家好 我是零一 最近我准备在组里进行代码串讲 所以我梳理了下项目之前的业务代码 在梳理的过程中 我看到了有个进度条组件写的非常好 这又想起我刚开始学前端时写的进度条的代码 跟这个比起来真的差距太大了 大部分的初学者应该都想不到 而且

  • 程序员常用的命令

    写在前面 你们好 我是小庄 很高兴能和你们一起学习常用命令 如果您对Java感兴趣的话可关注我的动态 写博文是一种习惯 在这过程中能够梳理和巩固知识 常用的Linux命令 cd 改变目录 cd 回退到上一级目录 直接cd进入默认目录 pwd

  • Vulkan_片元着色器特效5(泛光Bloom)

    本部分主要结合上一部分的Vulkan 片元着色器特效4 高动态范围HDR 来综合展示HDR 泛光场景 主要参照 LearnOpenGL中的Bloom章节 一 基本原理 Bloom使我们能够注意到一个明亮的物体真的有种明亮的感觉 泛光可以极大

  • ctfshow web入门——web2

    无法查看源代码 点击右键确实不行 直接ctrl u查看即可 但这个也可以用另一种方法查看网页源代码 即在网页url前面 view source

  • stream详解

    Java中的Stream流 公司中用了很多Stream流 经常用来筛选出PO类型的List中想要的数据 所以还是比较常用的 Stream是Java8的新成员 允许以声明式方式处理数据集合 代码简洁 函数式编程写出的代码简洁且意图明确 使用s

  • ML-逻辑回归-Softmax-交叉熵（小航）

    在分类问题中 交叉熵的本质就是 对数 似然函数的最大化 逻辑回归的损失函数的本质就是 对数 似然函数的最大化 最大似然估计讲解 https www jianshu com p 191c029ad369 参考统计学习方法笔记 P79 soft

  • Svelte3聊天室

    Python微信订餐小程序课程视频 https edu csdn net course detail 36074 Python实战量化交易理财系统 https edu csdn net course detail 35475 基于svelt

热门标签