开发者社区> 3iakz3vvkvroc> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

云端极简部署Svelte3聊天室

简介: 在云开发平台基于svelteKit项目快速开发仿微信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://workbench.aliyun.com/application/front/create?fromConfig=25&fromRepo=sol_github_25

参考文献:https://www.cnblogs.com/xiaoyan2017/p/16110203.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一文带你了解企业上云数据分析首选产品Quick BI
文章将为大家详细介绍上云数据分析首选产品 Quick BI的核心能力。
73 0
揭秘 | 连续3年支撑双11,阿里云神龙如何扛住全球流量洪峰?
2019年云栖大会,阿里云正式发布第三代自研神龙架构,全面支持ECS虚拟机、裸金属、云原生容器等,贯穿整个IaaS计算平台,并在IOPS、PPS等方面提升5倍性能,用户能在云上获得物理机100%的计算能力。本文将为大家揭秘今年双11最具挑战的搜索广告、金融级业务核心交易数据库如何迁移至第三代神龙架构,详解神龙架构如何支撑阿里巴巴最大规模云原生实践落地,以及神龙架构如何通过宕机演练大考、备战双11的背后故事。
1067 0
《用友ERP-U8(V8.72)模拟实战----财务、供应链和生产制造》一导读
用友U8软件系统是用友软件公司开发的一套ERP产品,其功能包括财务管理、物流管理、生产制造管理和人力资源管理等几大系统功能。用友U8产品是目前ERP市场上的主流产品之一。
1397 0
《BREW进阶与精通——3G移动增值业务的运营、定制与开发》连载之80——BREW应用间通信之回调通知
版权声明:本文为半吊子子全栈工匠(wireless_com,同公众号)原创文章,未经允许不得转载。
440 0
44
文章
328
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载