electron+vue3+antdv实战聊天exe应用|Electron跨端聊天实例

Vue3ElectronChat聊天 使用vue3.0+electron11.2.3+vuex4+v3layer+v3scroll等技术开发的模仿QQ界面聊天应用。支持新开多个窗口、拖拽发送图片、动态换肤等功能。

使用技术

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

项目结构

一览效果

electron+vue3按需引入antdv组件库

项目中使用到了蚂蚁金服vue3桌面端UI组件库ant-design-vue。
首先需要先安装babel-plugin-import插件。
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',
      }
    ]
  ]
}

新建一个plugin.js，用来导入公共组件。

/**
 * 导入公共组件
 */

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

// 引入vue3弹窗组件v3layer
import V3Layer from '@components/v3layer'
// 引入vue3美化滚动条组件v3scroll
import V3Scroll from '@components/v3scroll'

...

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

    app.use(V3Layer)
    app.use(V3Scroll)

    ...
}

export default Plugins

electron+vue3自定义拖拽导航栏

如上图：项目中顶部菜单使用的是自定义组件来实现。保证了UI的一致性。

使用-webkit-app-region:drag即可快速实现一个可拖拽元素。不过设置 -webkit-app-region: drag 之后，点击鼠标右键会弹出系统菜单，总感觉是一种伪拖拽效果，可通过如下方法在创建窗体的时候暂时给屏蔽掉。

// 屏蔽系统右键菜单
win.hookWindowMessage(278, () => {
    win.setEnabled(false)
    setTimeout(() => {
        win.setEnabled(true)
    }, 100)

    return true
})

顶部导航栏支持传入标题、标题颜色/背景色、是否透明背景等功能。
vue3+electron实现自定义顶部条|最大/小化/关闭按钮

electron调用dll截图

项目中的截图功能本想着自己捣鼓一个，后来由于时间问题，就使用了第三方的dll来实现。

// 屏幕截图
ipcMain.on('win-capture', () => {
    console.log('调用微信dll截图...')
    let printScr = execFile(path.join(__dirname, '../static/screenShot/PrintScr.exe'))
    printScr.on('exit', (code) => {
        if(code) {
            console.log(code)
        }
    })
})

如果出现打包后，截图功能失效，记得需要作如下配置：

// 拷贝静态资源到指定位置
"extraResources": [
    {
        "from": "./static",
        "to": "static"
    },
],

electron打包配置

/**
 * @Desc     vue3项目配置+electron打包配置
 * @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", //图标路径
                }
            }
        }
    }
}

注意

1. 项目路径不能含有中文，否则打包会出错！
2. 尽量不要使用 getCurrentInstance 函数来操作store或router，打包也会出错！
3. 在渲染进程，也就是.vue页面，配置 nodeIntegration: true 来开启Node环境支持。

使用electron+vue3跨端开发QQ聊天程序就分享到这里。后续还会分享一些Electron实战项目。

vite2+vue3开发手机端仿抖音短视频|直播实例