关于electron:基于ElectronVite2高仿抖音短视频electronvue3小视频直播聊天

我的项目介绍

Vite2-ElectronDouYin 基于 vite2+electron12 跨端开发 vue3 我的项目之仿造抖音小视频应用程序。反对 键盘高低键切换短视频、新开多窗口模式 等性能。

应用技术

• 编码 / 技术：vscode / vue3.0+vuex4+vue-router@4
• 跨端框架：electron^12.0.1
• 组件库：vant3 (有赞挪动端 vue3 组件库)
• 滑动组件：swiper^6.5.0
• 弹窗组件：v3popup（基于 vue3.0 自定义弹层）
• 打包工具：vue-cli-plugin-electron-builder

我的项目构造目录

渲染过程主入口 main.js

应用 vite 构建工具搭建的我的项目，根目录有个 main.js 文件，是渲染过程的主入口配置文件。

/**
 * 渲染过程入口配置
 */
 
import {createApp} from 'vue'
import App from './App.vue'
 
// 引入 Router 及 Vuex
import Router from './router'
import Store from './store'
 
// 引入专用组件
import Plugins from './plugins'
 
import {winCfg, loadWin} from './module/actions'
 
// 引入 Js
import '@/assets/js/fontSize'
 
// 引入专用款式
import '@/assets/fonts/iconfont.css'
import '@/assets/css/reset.css'
import '@/assets/css/layout.css'
 
loadWin().then(args => {
    winCfg.window = args
 
    createApp(App)
    .use(Router)
    .use(Store)
    .use(Plugins)
    .mount('#app')
})

主过程入口 background.js

应用 vite 构建的我的项目，根目录同样有个 background.js，用来配置一些主过程。

/**
 * 主过程配置文件
 */
'use strict'
 
import {app, BrowserWindow, globalShortcut} from 'electron'
import {createProtocol} from 'vue-cli-plugin-electron-builder/lib'
 
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, resize: false})
  window.createTray()}
 
// Quit when all windows are closed.
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()
  }
})
 
app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
 
// This method will be called when Electron has finished
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 自定义拖拽导航栏 +Tabbar 底部栏

我的项目顶部导航条采纳无边框窗口 frame: false 自定义组件来实现。设置 css3 属性：-webkit-app-region: drag来实现拖拽性能。

<WinBar bgcolor="transparent" transparent>
    <template #wbtn>
        <a class="wbtn" title="二维码名片" @click="isShowPersonalCard=true"><i class="iconfont icon-erweima"></i></a>
        <a class="wbtn" title="设置" @click="isShowSideMenu=true"><i class="iconfont icon-menu"></i></a>
    </template>
</WinBar>
 
<WinBar bgcolor="linear-gradient(to right, #36384a, #36384a)">
    <template #title> 视频预览 </template>
    <template #wbtn>
        <a class="wbtn" title="另存为" @click="handleDownLoad"><i class="iconfont icon-down"></i></a>
    </template>
</WinBar>

底部 Tabbar 导航采纳全透明模式，下面还有个播放进度条。

<tabbar 
    bgcolor="linear-gradient(to bottom, transparent, rgba(0,0,0,.75))"
    color="rgba(245,255,235,.75)"
    activeColor="#fa367a"
    fixed
/>

Electron+Vue3 弹窗性能

我的项目中的弹窗分为 vue3 自定义弹窗组件和 electron 新开窗口弹窗两种形式。

如上图：页面外部弹窗均为 vue3 自定义组件实现成果。

<v3-popup v-model="isShowBankPicker" anim="footer" type="footer"
    :btns="[{text: '勾销', style: 'background:#fafafa;', click: () => isShowBankPicker=false},
    ]"
>
    <div style="border-radius:6px;overflow:hidden;">
        <van-radio-group v-model="bankVal" checked-color="#00e077">
            <van-cell-group>
                <van-cell title="中国银行储蓄卡(9918)" clickable @click="bankVal ='1'"style="padding:15px 20px;">
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
                <van-cell title="招商银行储蓄卡(1369)" clickable @click="bankVal ='2'"style="padding:15px 20px;">
                    <template #right-icon>
                        <van-radio name="2" />
                    </template>
                </van-cell>
                <van-cell title="应用新卡充值" clickable @click="bankVal ='3'"style="padding:15px 20px;">
                    <template #right-icon>
                        <van-radio name="3" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
    </div>
</v3-popup>

如上图：这些是应用 electron 新开多窗口实现弹窗成果。

const handleAboutWin = () => {
    data.isShowSideMenu= false createWin({
        title: '对于',
        route: '/about',
        width: 420,
        height: 320,
        resize: false,
        parent: winCfg.window.id,
        modal: true,
    })
}

Electron 实现系统托盘 | 闪动成果

electron 提供了 Menu 创立菜单配合 Tray 创立托盘。

createTray() {
    const trayMenu = Menu.buildFromTemplate([
        {label: '我在线上', icon: path.join(__dirname, '../resource/icon-online.png'),
            click: () => null},
        {label: '隐身', icon: path.join(__dirname, '../resource/icon-invisible.png'),
            click: () => null},
        {type: 'separator'},
        {label: '敞开音讯闪动', click: () => {this.flashTray(false)
            }
        },
        {type: 'separator'},
        {label: '显示窗口', click: () => {
                try {for(let i in this.winLs) {let win = this.getWin(i)
                        if(!win) return
                        if(win.isMinimized()) win.restore()
                        win.show()}
                } catch (error) {console.log(error)
                }
            }
        },
        {label: '退出', click: () => {
                try {for(let i in this.winLs) {let win = this.getWin(i)
                        if(win) win.webContents.send('win-logout')
                    }
                    app.quit()} catch (error) {console.log(error)
                }
            }
        },
    ])
    this.tray = new Tray(this.trayIco1)
    this.tray.setContextMenu(trayMenu)
    this.tray.setToolTip(app.name)
}

// 托盘图标闪动
flashTray(flash) {
    let hasIco = false

    if(flash) {if(this.flashTimer) return
        this.flashTimer = setInterval(() => {this.tray.setImage(hasIco ? this.trayIco1 : this.trayIco2)
            hasIco = !hasIco
        }, 500)
    }else {if(this.flashTimer) {clearInterval(this.flashTimer)
            this.flashTimer = null
        }
        this.tray.setImage(this.trayIco1)
    }
}
// 销毁托盘图标
destoryTray() {this.flashTray(false)
    this.tray.destroy()
    this.tray = null
}

通过调用 flashTray(true|false) 办法，即可实现开启 / 进行闪动成果。

vite2+electron 打包配置

在根目录新建一个 electron-builder.json 文件，用来配置一些 electron 打包参数。

/**
 * @Desc     vite2+electron 打包配置
 * @Time     andy by 2021-03
 * @About    Q：282310962  wx：xy190310
 */
 
{
    "productName": "electron-douyin", // 项目名称 打包生成 exe 的前缀名
    "appId": "com.example.electrondouyin", // 包名
    "compression": "maximum", //store|normal|maximum 打包压缩状况(store 速度较快)
    "artifactName": "${productName}-${version}-${platform}-${arch}.${ext}", // 打包后安装包名称
    // "directories": {
    //     "output": "build", // 输入文件夹（默认 dist_electron）// },
    "asar": false, //asar 打包
    // 拷贝动态资源目录到指定地位（如根目录下的 static 文件夹会拷贝至打包后的 dist_electron/win-unpacked/resources/static 目录）"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": "ElectronDouYin", // 桌面快捷键图标名称
    },
    "win": {"icon": "/static/shortcut.ico", // 图标门路}
}

ok，整合 vite.js+electron 跨平台开发抖音短视频利用就分享到这里。感激大家的反对！

附上一个 electron+vue3 跨端仿 QQ 聊天利用
vue3.x+electron+antdv 仿造 QQ 聊天室 |electron 桌面版仿 Q 聊天