electron31-大发黄金版app下载

：首创electron31.x vite5 vue3 setup pinia2搭建桌面端聊天系统实例。

框架与工具

• 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插件

项目目录结构

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

实现功能

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

vite整合electron搭建跨端项目

通过vite.js构建工具搭建vue3项目模板。

yarn create vite electron-vitechat
cd electron-vitechat
yarn install
yarn dev

安装electron依赖包插件。

// 安装electron
yarn add -d electron
// 安装electron-builder 用于打包可安装exe程序和绿色版免安装exe程序
yarn add -d electron-builder
// 安装vite-plugin-electron 用于将vite与electron无缝结合
yarn add -d vite-plugin-electron

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()
})

公共布局模板

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

electron31多窗口管理

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

通过如下方式快速创建一个新窗口。

// 登录窗口
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,
  })
}

electron-builder打包配置

在项目根目录新建一个electron-builder.json打包配置文件。

{
  "productname": "electron-vitechat",
  "appid": "com.andy.electron-vite-wechat",
  "大发黄金版app下载 copyright": "大发黄金版app下载 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}"
  }
}

本作品采用《cc 协议》，转载必须注明作者和本文链接