雲端極簡部署Svelte3聊天室

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

1.創建相關應用模版請參考鏈接：嘗鮮少代碼高性能的Svelte框架

2.完成創建後就可以在github中查看到新增的Vite倉庫

二 、 本地編寫 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.項目結構目錄

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

項目中頂部導航條及底部菜單欄均是基於svelte定製開發的自定義組件。

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

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

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

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 實現仿朋友圈下拉轉圈功能。

    
        
        
    


    
        
            
                ...
            
        
    

9.實現聊天功能

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

以上就是基於svelte.js+svelteKit開發仿微信app界面聊天實例的一些分享，希望對大家有所幫助！

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

1.上傳代碼

git add . 
git commit -m '添加你的註釋'
git push

2.在日常環境部署

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

3.配置自定義功能變數名稱線上上環境上線

• 配置線上環境自定義功能變數名稱。在功能開發驗證完成後要線上上環境進行部署，線上上環境的「部署配置」-「自定義功能變數名稱」中填寫自己的功能變數名稱。例如我們添加一個二級功能變數名稱 company.workbench.fun 來綁定我們部署的前端應用。然後複製自定義功能變數名稱下方的API網關地址對添加的二級功能變數名稱進行CNAME配置。

• 配置CNAME地址。複製好 API網關功能變數名稱地址後，來到你自己的功能變數名稱管理平臺（此示例中的功能變數名稱管理是阿裡雲的功能變數名稱管理控制台，請去自己的功能變數名稱控制台操作）。添加記錄的「記錄類型」選擇「CNAME」，在「主機記錄」中輸入你要創建的二級功能變數名稱，這裡我們輸入「company」，在「記錄值」中粘貼我們之前複製的 API網關功能變數名稱地址，「TTL」保留預設值或者設置一個你認為合適的值即可。

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

4.項目預覽效果

一鍵創建svelte應用模版鏈接 ：https://workbench.aliyun.com/application/front/create?fromConfig=25&fromRepo=sol_github_25

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