云端极简部署Svelte3聊天室

摘要

这里打开浏览器8080端口，并出现默认页面。项目中顶部导航条及底部菜单栏均是基于svelte定制开发的自定义组件。

一 、通过云开发平台快速创建初始化应用

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="云端极简部署Svelte3聊天室" 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