Electron31_Vite5_Wechat跨平台聊天实例|electron31仿微信实战

举报
Andy Yan 发表于 2024/07/10 08:17:26 2024/07/10
【摘要】 基于electron31+vite5+pinia2仿微信Exe聊天应用ViteElectronChat。实现了聊天、联系人、收藏、朋友圈/短视频等模块。支持electron多开窗口管理、壁纸皮肤、自定义最大化/最小化/关闭等功能。

半个月之前有分享一款vite5+vue3网页版web聊天室项目。历经大半个月倾力开发，我的又一个跨平台原创新作electron31.x+vite5电脑端聊天exe项目正式完结了。

https://bbs.huaweicloud.com/blogs/429718

360截图20240710072842911.png

360截图20240709104646122.png

技术框架与工具

  • Vue 3: 利用Vue 3的Composition API来编写更可维护的代码，通过setup脚本简化组件逻辑。
  • Electron 31: 提供跨平台的能力，使应用能在Windows、macOS和Linux上运行。
  • Vite 5: 作为构建工具，加速开发时的热更新，提高开发效率。
  • Element Plus: 作为UI组件库，提供丰富的桌面端界面元素，快速搭建界面。
  • Pinia: 状态管理库，用于管理应用状态，pinia-plugin-persistedstate用于持久化存储状态。
  • vue-router 4: 路由管理，支持桌面端的页面导航。
  • electron-builder: 用于打包应用，生成可执行文件。
  • vite-plugin-electron^0.28.7: electron整合vite插件

p1.gif

p2.gif

项目结构

electron-vitechat项目采用vite5构建工具搭建项目框架，整合electron31跨平台技术。

360截图20240708033550149.png

功能实现

  • 聊天功能: 实现即时消息发送，支持文本、图片、视频、链接预览等。
  • 多窗口管理: 支持多开窗口，模拟真实聊天应用体验。
  • 动态换肤: 提供用户界面换肤功能，增加用户个性化体验。
  • 通讯录与朋友圈: 类似微信的联系人管理与社交分享功能。
  • 自定义导航条: 为应用定制导航，提升用户体验。

360截图20240708064229555.png

electron主线程配置

/**
 * electron主进程入口配置
 * @author andy
 */

import { app, BrowserWindow } from 'electron'

import { WindowManager } from '../src/windows/index.js'

// 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true

const createWindow = () => {
  let win = new WindowManager()
  win.create({isMajor: true})
  // 系统托盘管理
  win.trayManager()
  // 监听ipcMain事件
  win.ipcManager()
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if(BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin') app.quit()
})

vite.config.js配置electron主进程入口。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'node:path'
import electron from 'vite-plugin-electron'
// import electron from 'vite-plugin-electron/simple'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return {
    define: {
      'process.env': env, // 将.env环境变量注入到process.env
    },

    plugins: [
      vue(),
      electron({
        entry: 'electron/main.js',
      })
      /* electron({
        main: {
          entry: 'electron/main.js'
        },
        preload: {
          input: 'electron/preload.js'
        },
        // renderer: {}
      }) */
    ],
  
    // 构建配置
    build: {
      // ...
    },
    esbuild: {
      // 打包去除 console.log 和 debugger
      drop: ['console', 'debugger']
    },
  
    // 服务器配置
    server: {
      // port: 3000,
      // open: true,
      // https: false,
      // proxy: {}
    },
  
    resolve: {
      // 设置别名
      alias: {
        '@': resolve(__dirname, 'src'),
        '@assets': resolve(__dirname, 'src/assets'),
        '@components': resolve(__dirname, 'src/components'),
        '@views': resolve(__dirname, 'src/views'),
      }
    }
  }
})

360截图20240708064229558.png

360截图20240708064304166.png

360截图20240708064450447.png

001360截图20240708000941692.png

003360截图20240708001303462.png

003360截图20240708002327702.png

004360截图20240708003010461.png

004360截图20240708003254933.png

005360截图20240708003532900.png

005360截图20240708003831501.png

006360截图20240708004140013.png

入口配置main.js

引入UI组件库，路由/状态管理、初始化渲染进程实例。

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'

import { launchApp } from '@/windows/actions'

launchApp().then(config => {
  if(config) {
    console.log('窗口参数:', config)
    console.log('窗口id:', config?.id)

    // 全局存储窗口配置
    window.config = config
  }

  // 创建app应用实例
  createApp(App)
  .use(ElementPlus)
  .use(Router)
  .use(Pinia)
  .mount('#app')
})

electron-vitechat公共布局模板

<template>
  <template v-if="!route?.meta?.isNewWin">
    <div
      class="vu__container flexbox flex-alignc flex-justifyc"
      :style="{'--themeSkin': appstate.config.skin}"
    >
      <div class="vu__layout flexbox flex-col">
        <div class="vu__layout-body flex1 flexbox" @contextmenu.prevent>
          <!-- 菜单栏 -->
          <slot v-if="!route?.meta?.hideMenuBar" name="menubar">
            <MenuBar />
          </slot>

          <!-- 侧边栏 -->
          <div v-if="route?.meta?.showSideBar" class="vu__layout-sidebar flexbox">
            <aside class="vu__layout-sidebar__body flexbox flex-col">
              <slot name="sidebar">
                <SideBar />
              </slot>
            </aside>
          </div>

          <!-- 主内容区 -->
          <div class="vu__layout-main flex1 flexbox flex-col">
            <ToolBar v-if="!route?.meta?.hideToolBar" />
            <router-view v-slot="{ Component, route }">
              <keep-alive>
                <component :is="Component" :key="route.path" />
              </keep-alive>
            </router-view>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-else>
    <WinLayout />
  </template>
</template>

vue3+electron31自定义无边框导航栏

<script setup>
  import { ref } from 'vue'
  import { isTrue } from '@/utils'

  import { winSet } from '@/windows/actions'

  import Winbtns from './btns.vue'

  const props = defineProps({
    // 标题
    title: {type: String, default: ''},
    // 标题颜色
    color: String,
    // 背景色
    background: String,
    // 标题是否居中
    center: {type: [Boolean, String], default: false},
    // 是否固定
    fixed: {type: [Boolean, String], default: false},
    // 背景是否镂空
    transparent: {type: [Boolean, String], default: false},
    // 层级
    zIndex: {type: [Number, String], default: 2024},

    /* 控制Winbtn参数 */
    // 窗口是否可最小化
    minimizable: {type: [Boolean, String], default: true},
    // 窗口是否可最大化
    maximizable: {type: [Boolean, String], default: true},
    // 窗口是否可关闭
    closable: {type: [Boolean, String], default: true},
  })
</script>

<template>
  <div class="ev__winbar" :class="{'fixed': fixed || transparent, 'transparent': transparent}">
    <div class="ev__winbar-wrap flexbox flex-alignc vu__drag">
      <div class="ev__winbar-body flex1 flexbox flex-alignc">
        <!-- 左侧区域 -->
        <div class="ev__winbar-left"><slot name="left" /></div>
        <!-- 标题 -->
        <div class="ev__winbar-title" :class="{'center': center}">
          <slot name="title">{{title}}</slot>
        </div>
        <!-- 右侧附加区域 -->
        <div class="ev__winbar-extra vu__undrag"><slot name="extra" /></div>
      </div>
      <Winbtns :color="color" :minimizable="minimizable" :maximizable="maximizable" :closable="closable" :zIndex="zIndex" />
    </div>
  </div>
</template>

p4-1.gif

vue3+electron31多窗口模式|新开窗口

360截图20240708064229555.png

/**
 * 创建新窗口
 * @param {object} args 窗口配置参数 {url: '/chat', width: 850, height: 600, ...}
 */
export function winCreate(args) {
  window.electron.send('win-create', args)
}

通过winCreate方法快速新建一个窗口。

// 登录窗口
export function loginWindow() {
  winCreate({
    url: '/login',
    title: '登录',
    width: 320,
    height: 380,
    isMajor: true,
    resizable: false,
    maximizable: false,
    alwaysOnTop: true
  })
}

// 关于窗口
export function aboutWindow() {
  winCreate({
    url: '/win/about',
    title: '关于',
    width: 375,
    height: 300,
    minWidth: 375,
    minHeight: 300,
    maximizable: false,
    alwaysOnTop: true,
  })
}

// 设置窗口
export function settingWindow() {
  winCreate({
    url: '/win/setting',
    title: '设置',
    width: 550,
    height: 470,
    resizable: false,
    maximizable: false,
  })
}

p5-1.gif

electron打包构建配置

新建一个electron-builder.json打包配置文件。

{
  "productName": "Electron-ViteChat",
  "appId": "com.andy.electron-vite-wechat",
  "copyright": "Copyright © 2024-present Andy  Q:282310962",
  "compression": "maximum",
  "asar": true,
  "directories": {
    "output": "release/${version}"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true,
    "perMachine": true,
    "deleteAppDataOnUninstall": true,
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "shortcutName": "ElectronViteChat"
  },
  "win": {
    "icon": "./resources/shortcut.ico",
    "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
    "target": [
      {
        "target": "nsis",
        "arch": ["ia32"]
      }
    ]
  },
  "mac": {
    "icon": "./resources/shortcut.icns",
    "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
  },
  "linux": {
    "icon": "./resources",
    "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
  }
}

作者：xiaoyan2017
链接：https://www.cnblogs.com/xiaoyan2017/p/18290962
来源：博客园
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Electron Vue
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入