整合vite2.0+electron12+vant3.x跨端仿抖音短视频+聊天+直播exe应用

vite2-electron-douyin 基于vite2.x+electron模仿抖音短视频应用实例。

整合了vite2+electron跨端开发技术仿制抖音界面桌面版exe应用软件。基于Vite2.x+Electron12+Vant3+Swiper6+V3popup等技术开发实现，支持键盘上下键切换短视频、新开多窗口等功能。

技术栈

编码/技术：vscode / vue3.0 + vuex4 + vue-router@4
组件库：vant3 (有赞移动端vue3组件库)
滑动组件：swiper^6.5.0
弹窗组件：v3popup（基于vue3.0自定义弹层）
打包工具：electron-builder
iconfont图标：阿里字体图标库

项目结构目录

项目整合了vite2和electron技术，实现跨平台开发应用。短视频|直播页面滑动切换效果，使用的是swiper组件来实现。

Electron主进程入口文件

使用vue-cli-plugin-electron-builder构建的项目，根目录会有一个background.js入口文件。

/*** 主进程配置文件*/'use strict'import { app, protocol, BrowserWindow, globalShortcut } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'import Windows from './module/windows'const isDevelopment = process.env.NODE_ENV !== 'production'protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }
])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', () => {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()
})// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {if (isDevelopment && !process.env.IS_TEST) {// Install Vue Devtools// try {//   await installExtension(VUEJS_DEVTOOLS)// } catch (e) {//   console.error('Vue Devtools failed to install:', e.toString())// }}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()})}
}

渲染页面入口配置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 = argscreateApp(App).use(Router).use(Store).use(Plugins).mount('#app')
})

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仿QQ托盘图标+闪烁

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) returnif(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(true|false) 即可实现开启/停止闪烁效果。

Electron+Vue3弹窗组件

项目中使用到的弹窗效果，分为electron桌面端弹窗和vue3自定义弹窗组件两种实现方式。

createWin({title: '关于',route: '/about',width: 420,height: 320,resize: false,parent: winCfg.window.id,modal: true,
})

<v3-popup v-model="isShowLogoutSys" anim="footer" type="actionsheet"content="<span><i class='iconfont icon-info c-46b6ef'></i> 确定要退出当前账号吗？</span>":btns="[{text: '退出登录', style: 'color:#fa367a;', click: logoutSys},{text: '取消', click: () => isShowLogoutSys=false},]"
>
</v3-popup>

具体的实现方式，大家可以去看看下面这两篇文章，这里就不详细介绍了。

https://www.cnblogs.com/xiaoyan2017/p/14210820.html

https://www.cnblogs.com/xiaoyan2017/p/14403820.html

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", //图标路径}
}

注意

项目路径最好不要有中文，否则打包可能会报错。
最好不要使用getCurrentInstance来操作router或store，打包会报错。
vite.js+electron构建的项目，在渲染进程中.vue页面，调用ipcRenderer或remote会报如下错误

Uncaught TypeError: fs.existsSync is not a function

可在webPreferences中配置preload来解决。

webPreferences: {contextIsolation: false,nodeIntegration: false, // 启用Node集成preload: path.join(__dirname, '../resource/preload.js'),webSecurity: false,enableRemoteModule: true, // 是否启用远程模块
}

ok，以上就是vite2+electron+vant3跨端仿抖音短视频的分享，希望大家喜欢哈！

最后附上一个Vue3+Electron跨平台聊天应用

https://blog.csdn.net/yanxinyun1990/article/details/114162969