Vue3+Electron桌面版聊天应用|electron11仿QQ界面

#1

前几天有给大家分享一个vue3.x短视频|直播实例,这次分享的是electron跨端聊天应用。

vue3-electronQchat聊天应用 一款基于vue3.0+electron11+ant-design-vue+vuex4+v3layer等技术开发桌面端exe聊天软件实战项目。

vue3ElectronQChat 支持多窗体模式/换肤等功能。

实现了发送富文本消息、图片/视频预览、拖拽发送图片、截图/朋友圈等功能。

使用技术

  • 编码+技术:vscode | vue3.0+vuex4+vue-router@4
  • 跨端框架:electron11.2.3
  • 组件库:ant-design-vue (阿里桌面端vue3组件库)
  • 弹窗组件:v3layer(vue3自定义弹窗组件)
  • 滚动条组件:v3scroll(vue3自定义滚动条组件)
  • 打包工具:vue-cli-plugin-electron-builder
  • 按需引入:babel-plugin-import^1.13.3

项目结构目录

360%E6%88%AA%E5%9B%BE20210226092958939

效果一览

electron多窗体|父子modal窗口

项目支持同时打开多个窗口,新建父子modal窗口。

// 关于窗口
const handleAboutWin = () => {
    createWin({
        title: '关于',
        route: '/about',
        width: 380,
        height: 280,
        resize: false,
        parent: winCfg.window.id,
        modal: true,
    })
}

// 换肤窗口
const handleSkinWin = () => {
    createWin({
        title: '换肤',
        route: '/skin',
        width: 720,
        height: 475,
        resize: false,
    })
}

通过调用createWin方法,传入参数,即可快速生成一个新窗口。

electron11快速创建多窗口模式

electron无边框窗口|自定义导航菜单

项目采用无边框形式frame:false,可以通过-webkit-app-region:drag来自定义拖拽区域。

至于如何实现自定义导航,之前有过相关分享文章,大家感兴趣可以去看看。

electron实现QQ登录窗口|自定义顶部导航组件

electron主进程配置

使用vue3和electron创建的项目,会有一个background.js配置文件。

/**
 * 主进程入口配置
 */

import { app, BrowserWindow, globalShortcut } from 'electron'
// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'

import Windows from './module/windows'

const isDevelopment = process.env.NODE_ENV !== 'production'

async function createWindow() {
  let window = new Windows()

  window.listen()
  window.createWin({isMainWin: true})
  window.createTray()
}

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

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

app.on('ready', async () => {
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

electron-builder打包配置

项目打包配置可以在package.json里面配置,也可以在vue.config.js里面进行配置。

/**
 * @Desc     vue3项目配置文件
 * @Time     andy by 2021-02
 * @About    Q:282310962  wx:xy190310
 */

const path = require('path')

module.exports = {
    // 基本路径
    // publicPath: '/',

    // 输出文件目录
    // outputDir: 'dist',

    // assetsDir: '',

    // 环境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否开启https
        https: false,
        // 编译完是否打开网页
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路径别名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@module', path.join(__dirname, 'src/module'))
            .set('@plugins', path.join(__dirname, 'src/plugins'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    },

    // 插件配置
    pluginOptions: {
        electronBuilder: {
            // 配置后可以在渲染进程使用ipcRenderer
            nodeIntegration: true,

            // 项目打包参数配置
            builderOptions: {
                "productName": "electron-qchat", //项目名称 打包生成exe的前缀名
                "appId": "com.example.electronqchat", //包名
                "compression": "maximum", //store|normal|maximum 打包压缩情况(store速度较快)
                "artifactName": "${productName}-${version}-${platform}-${arch}.${ext}", //打包后安装包名称
                // "directories": {
                //     "output": "build", //输出文件夹(默认dist_electron)
                // },
                "asar": false, //asar打包
                // 拷贝静态资源目录到指定位置
                "extraResources": [
                    {
                        "from": "./static",
                        "to": "static"
                    },
                ],
                "nsis": {
                    "oneClick": false, //一键安装
                    "allowToChangeInstallationDirectory": true, //允许修改安装目录
                    "perMachine": true, //是否开启安装时权限设置(此电脑或当前用户)
                    "artifactName": "${productName}-${version}-${platform}-${arch}-setup.${ext}", //打包后安装包名称
                    "deleteAppDataOnUninstall": true, //卸载时删除数据
                    "createDesktopShortcut": true, //创建桌面图标
                    "createStartMenuShortcut": true, //创建开始菜单图标
                    "shortcutName": "ElectronQChat", //桌面快捷键图标名称
                },
                "win": {
                    "icon": "./static/shortcut.ico", //图标路径
                }
            }
        }
    }
}

ant-design-vue组件按需引入

首先需要安装按需引入插件 npm i babel-plugin-import -D 并在 babel.config.js 里面进行相关配置。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 按需引入第三方插件
  plugins: [
    [
      'import',
      {
        'libraryName': 'ant-design-vue',
        'libraryDirectory': 'es',
        'style': 'css',
      }
    ]
  ]
}

根据使用到的组件,按需引入即可。在打包的时候可大大的减少体积。

// 按需引入ant-design-vue组件库
import {
    Button, message, Tabs, Checkbox, Image, Upload
} from 'ant-design-vue'

// ...

const Plugins = (app) => {
    app.use(Button)
    app.use(Tabs)
    app.use(Checkbox)
    app.use(Image)
    app.use(Upload)

    // ...

    app.config.globalProperties.$message = message
}

export default Plugins

注意

在开发/打包的时候还需要注意下面的一些坑。

  • 项目路径不能含有中文,否则打包会出错!

  • 尽量不要使用 getCurrentInstance 函数来操作store或router,打包也会出错!

  • 在渲染进程,也就是.vue页面,使用ipcRenderer或remote出现如下错误

Uncaught TypeError: fs.existsSync is not a function

配置 nodeIntegration: true 来开启Node环境支持。

ohucs

好了,以上就是vue3.x+electron跨平台开发聊天程序的一些简单分享,希望各位喜欢!

vue3+vant3移动端仿微信app聊天实例

qrcode_%E5%85%AC%E4%BC%97%E5%8F%B7_%E7%89%A9%E6%96%992