基於svelteKit開發仿微信app介面聊天例項

哈哈哈hh發表於2022-06-22
APP

一 、透過雲開發平臺快速建立初始化應用

1.建立相關應用模版請參考連結： 嚐鮮少程式碼高效能的Svelte框架

2.完成建立後就可以在github中檢視到新增的Vite倉庫

file

二 、 本地編寫 Svelte3聊天室

1.將應用模版克隆到本地

  • 首先假定你已經安裝了Git、node，沒有安裝請移步node官網進行安裝。克隆專案：
git clone + 專案地址
  • 進入專案檔案
cd Svelte
  • 切換到feature/1.0.0 分支上
git checkout feature/1.0.0
  • 安裝依賴包
npm install
  • 啟動服務
npm run dev

這裡開啟瀏覽器8080埠，並出現預設頁面。

2.專案結構目錄

file

3. 自定義導航欄Navbar+選單欄Tabbar

專案中頂部導航條及底部選單欄均是基於svelte定製開發的自定義元件。

file

file

file

4. 自定義手機端彈窗元件

svelte-popup 一款基於Svelte3.x開發自定義多功能svPopup彈出框元件，支援超過20+引數自由配置、元件式+函式式混合呼叫方式。

file

5. config.js配置檔案

如何在svelte.js專案中使用sass/less編寫樣式？可以安裝 sass 及 svelte-preprocess 依賴。

file

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

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

7. 狀態管理+本地儲存

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

8. 實現仿朋友圈下拉重新整理

使用 svelte.js+mescroll 實現仿朋友圈下拉轉圈功能。

file

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

9. 實現聊天功能

聊天頁面文字框支援文字+emoj混排，游標處插入表情、網址/圖片/影片預覽、紅包等功能。並且底部文字框單獨抽離了一個editor.svelte元件。

file

<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介面聊天例項的一些分享，希望對大家有所幫助！

三 、 雲端一鍵部署上線應用

1.上傳程式碼

git add . 
git commit -m '新增你的註釋'
git push

2.在日常環境部署

一鍵進行應用部署。在應用詳情頁面點選日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以後可以點選訪問部署網站檢視效果。

file

3.配置自定義域名線上上環境上線

  • 配置線上環境自定義域名。在功能開發驗證完成後要線上上環境進行部署，線上上環境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們新增一個二級域名 company.workbench.fun 來繫結我們部署的前端應用。然後複製自定義域名下方的API閘道器地址對新增的二級域名進行CNAME配置。

file

  • 配置CNAME地址。複製好 API閘道器域名地址後，來到你自己的域名管理平臺（此示例中的域名管理是阿里雲的域名管理控制檯，請去自己的域名控制檯操作）。新增記錄的「記錄型別」選擇「CNAME」，在「主機記錄」中輸入你要建立的二級域名，這裡我們輸入「company」，在「記錄值」中貼上我們之前複製的 API閘道器域名地址，「TTL」保留預設值或者設定一個你認為合適的值即可。

file

  • 線上上環境部署上線。回到雲開發平臺的應用詳情頁面，按照部署的操作，點選線上環境的「部署按鈕」，部署完成以後就在你自定義的域名進行了上線。CNAME 生效之後，我們輸入 company.workbench.fun（示例網址） 可以開啟部署的頁面。至此，如何部署一個應用到線上環境，如何繫結自己的域名來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的域名玩起來吧

file

4.專案預覽效果

file

file

file

file

file

file

一鍵建立svelte應用模版連結 ：

參考文獻： https://www.cnblogs.com/xiaoyan2017/p/16110203.html


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70003733/viewspace-2902108/，如需轉載，請註明出處，否則將追究法律責任。

相關文章