最近一直在学习前端新框架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+**参数自由配置、组件式+函数式混合调用方式。
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开发手机后台管理系统