上个月有给大家分享一个Electron跨端仿制QQ聊天应用项目。今天带来的是最新开发的Electron+Vite2跨端短视频+直播应用实战。
vite2-electron-douyin 基于
vite2构建工具整合electron跨平台技术开发的一款仿制抖音短视频+聊天+直播应用exe软件。支持键盘上下键切换效果、新开多个窗口等功能。
技术栈
- 构建工具：vite.js
- vue3全家桶：vue3.0+vuex4+vue-router@4
- 跨端框架：electron12.0.1
- 打包工具：vue-cli-plugin-electron-builder
- 组件库：vant3 (有赞移动端vue3组件库)
- 弹层组件：v3popup (vue3封装移动端弹窗组件)
- 滑动组件：swiper6
项目结构
目前electron最新稳定版为v12.0.2，项目中使用的是v12.0.1版。
Electron主进程入口配置
使用electron-builder构建的项目，根目录下有一个background.js配置文件。
/**
* 主进程入口配置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+Vue3拖放导航条+TabBar标签栏
项目整体采用无边框模式frame: false，为了拖动窗口，就需要自定义拖拽区域。
通过设置-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
/>
具体的实现方式，大家感兴趣可以去看看下面这篇分享。
vue3+electron自定义弹窗功能
项目中的弹窗分为vue3自定义组件和electron创建弹窗两种方式。
const handleSendFlower = () => {
let $el = v3popup({
type: 'android',
content: '<i class="iconfont icon-douzi c-00e077"></i> 确定送TA一颗微信豆吗？',
btns: [
{text: '取消', click: () => $el.close()},
{text: '确定', style: 'color:#fa367a;', click: handleOk},
]
})
}
const handleAboutWin = () => {
data.isShowSideMenu= false createWin({
title: '关于',
route: '/about',
width: 420,
height: 320,
resize: false,
parent: winCfg.window.id,
modal: true,
})
}
Vite.js+Electron打包参数配置
@vue/cli构建的项目，可以在vue.config.js中配置electron打包参数。而vite.js构建的项目，没办法在vite.config.js中配置，好在electron提供了一个electron-builder.json配置文件。
在根目录新建一个electron-builder.json配置文件。
/**
* @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", //图标路径
}
}
这样，运行npm run electron:builder就可以打包了。
ending，使用vite2+electron模仿抖音短视频/直播应用就分享到这里。
