基于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配置如下。

<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错误页 -->
<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 2022-04
* @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://www.cnblogs.com/xiaoyan2017/p/15836112.html

Svelte3聊天室|svelte+svelteKit仿微信聊天实例|svelte.js开发App的更多相关文章

  1. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

  2. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

  3. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  4. Taro聊天室|react+taro仿微信聊天App界面|taro聊天实例

    一.项目简述 taro-chatroom是基于Taro多端实例聊天项目,运用Taro+react+react-redux+taroPop+react-native等技术开发的仿微信App界面聊天室,实 ...

  5. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  6. Tauri-Vue3桌面端聊天室|tauri+vite3仿微信|tauri聊天程序EXE

    基于tauri+vue3.js+vite3跨桌面端仿微信聊天实例TauriVue3Chat. tauri-chat 运用最新tauri+vue3+vite3+element-plus+v3layer等 ...

  7. electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天

    一.项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息 ...

  8. h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗

    这段时间一直在着手h5开发手机端聊天系统——html5仿微信聊天室,最近又在原先基础上开发了一个仿微信.微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗 ...

  9. Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例

    一.项目介绍 next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目.实现了消息/表情发送.图片/视频预 ...

随机推荐

  1. Spring RedisTemplate批量插入

    1. 循环请求 最容易想到也是最耗时的操作,不推荐使用.简单样例如下 @Service public class RedisService { @Resource private RedisTempl ...

  2. python-用代码实现队列,处理斐波那契数列

    队列在进行数据操作时必须遵循"先进先出(Firstin Firstout,FIFO)"的原则,这一特点决定了队列的基本操作需要在其两端进行 队列(Queue)的基本操作通常在队列的 ...

  3. Python函数-5 生成器

    生成器有时候,序列或集合内的元素的个数非常巨大,如果全制造出来并放入内存,对计算机的压力是非常大的.比如,假设需要获取一个10**20次方如此巨大的数据序列,把每一个数都生成出来,并放在一个内存的列表 ...

  4. kubernetes修改ingress默认端口

    kubectl edit daemonset nginx-ingress-controller -n ingress-nginx containers: - args: - /nginx-ingres ...

  5. kubernetes里kube-proxy的ConfigMap误删除处理

    由于想要开启ipvs,没想到把cm当成pod删除了....然后就开始了修复之路 ConfigMap介绍 ConfigMap是一种API对象,用来将非加密数据保存到键值对中.可以用作环境变量.命令行参数 ...

  6. pygame.update()与pygame.flip()的区别

    flip函数将重新绘制整个屏幕对应的窗口. update函数仅仅重新绘制窗口中有变化的区域. 如果仅仅是几个物体在移动,那么他只重绘其中移动的部分,没有变化的部分,并不进行重绘.update比flip ...

  7. 放在initramfs的ko会先加载,还是/lib/modules/下面的ko会先加载?

    如果是在switchroot时加载,用的是initramfs,在switchroot后,用的是硬盘上的,有些ko放到initramfs中,但是switchroot前不加载的话,用的还是硬盘上的,关键看 ...

  8. 基于SpringBoot实现自动装配返回属性

    一:需求背景 在业务开发中经常会有这个一个场景,A(业务表)表中会记录数据的创建人,通常我们会用userId字段记录该数据的创建者,但数据的使用方会要求展示该数据的创建者姓名,故我们会关联用户表拿该用 ...

  9. 无传感FOC控制中的转子位置和速度确定方法一

    使用PLL估算器在无感的情况下,估计转子的角度和角速度 PLL估算器的工作原理基于反电动势的d分量在稳态下等于零,其框图如下: ΚΦ 表示电压常量,下面给出了电气转速计算中使用的归 一化 ΚΦ  : ...

  10. MySQL—分页查询

    分页查询 应用场景:当要显示的数据,当一页显示不全,有很多的数据时,就需要分页提交sql请求 语法:select 查询列表 from表名 [  join type join 表2 on连接条件 whe ...