一、介紹
前端三大框架的有力競爭者 svelte.js
問世啦。號稱比vue.js還好用,無虛擬DOM、極速響應能力、編譯及執行速度超快
。github上面star已經達到58K+。足以證明值得一學。
svelte3-chat 基於 svelte.js+svelteKit+sass+mescroll
開發的仿微信app介面聊天實戰專案。
二、技術棧
- 編碼器:VScode
- 框架技術:svelte^3.46.0+svelteKit
- 下拉元件:mescroll.js^1.4.2
- 樣式處理:sass+svelte-preprocess
- 彈窗元件:svelte-popup
- 資料模擬:mockjs^1.1.0
支援傳送圖文訊息/gif動圖、圖片/視訊預覽、下拉重新整理、紅包及朋友圈等功能。
三、專案結構目錄
svelte自定義導航欄Navbar/選單欄Tabbar
頂部導航條及底部選單欄均是基於svelte定製開發的自定義元件。
之前有分享過一篇文章,大家可以去看下。
https://segmentfault.com/a/1190000041539049
svelte實現彈窗功能
專案中的所有彈窗效果,均是svelte自定義元件實現功能。
svelte-popup 一款基於Svelte3.x
開發自定義多功能svPopup彈出框元件,支援超過20+引數自由配置、元件式+函式式混合呼叫方式。
https://segmentfault.com/a/1190000041566666
svelte配置檔案
在svelte專案中也可以使用sass編寫樣式。
npm i sass svelte-preprocess -D
/**
* 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
公共模板
<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實現朋友圈功能
專案中新增了朋友圈功能,使用svelte+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>
Ok,基於svelte.js開發聊天專案就分享到這裡。
最後附上一個uniapp開發後臺系統例項專案
https://segmentfault.com/a/1190000041357547