Vite2+Electron仿抖音|vite2.x+electron12+vant3短视频|直播|聊天

整合vite2+electron12跨平台仿抖音电脑版实战Vite2-ElectronDouYin。

基于vite2.0+electron12+vant3+swiper6+v3popup等技术跨端仿制抖音短视频+聊天+直播桌面版应用。实现短视频上下拖拽滑动、评论/聊天、执行dll截图、最小至托盘。支持键盘上下键切换、新开多窗口等功能。

一、使用技术

• 编辑器：VScode
• 框架技术：vite2.1.0+electron12.0.1+vuex4+vue-router@4
• 组件库：vant^3.0.10 (有赞移动端vue3组件库)
• 打包工具：vue-cli-plugin-electron-builder
• 轮播组件：swiper^6.5.0
• 弹层组件：v3popup（基于vue3自定义移动端弹出框）
• 字体图标：阿里iconfont矢量图标库

二、项目结构

三、运行效果

 

 

◆ electron12实现顶部导航栏窗体拖拽+底部Tabbar

如上图：自定义无边框  frame: false  拖拽导航栏。支持标题、颜色/背景色、是否镂空透明等功能。

<WinBar :bgcolor="headerBg" 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
/>

至于具体的实现方式，之前也有过一些相关的分享，感兴趣的话可以去看看历史文章。

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

◆ electron12实现托盘图标|闪烁效果

如上图：关闭窗口会有提示是否最小到系统托盘。

createTray() {
console.log('------开始创建托盘')
console.log(__dirname)

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) {

2b58
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)  即可实现打开/关闭闪烁效果。需要注意的是ico图标路径，否则托盘图标会不显示。

可以通过  console.log(__dirname)  来查看输出路径，默认是dist_electron打包目录。

◆ vue3+electron自定义弹出框

项目中使用到的弹窗分为vue3自定义弹窗组件和electron桌面版弹窗两种模式。

<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>

const handleAboutWin = () => {
data.isShowSideMenu= false

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

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

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

https://www.geek-share.com/detail/2824374980.html

◆ vite2项目配置文件

非常简单的一个vite2项目基础配置文件，详细的配置大家可以去查阅官方文档。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],

// base: '/',
// mode: 'development' //production
build: {
/**
* 输出文件目录
* @default dist（默认）
*/
// outDir: 'target',
},

// 环境配置
server: {
// 端口
port: 3000,

// 是否浏览器自动打开
open: false,

// 开启https
https: false,

// 代理配置
proxy: {
// ...
}
},

resolve: {
// 设置路径别名
alias: {
'@': path.resolve(__dirname, '../src'),
}
}
})

◆ vite2+electron打包配置文件

如果使用@vue/cli + electron构建的项目，可以直接在vue.config.js中配置打包参数。使用vite.js + electron构建的项目，则需要在根项目新建一个electron-builder.json打包配置文件。

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

为了避免打包后，资源文件丢失。大家可以配置  extraResources  用于配置拷贝一些静态资源文件到指定目录位置。

"extraResources": [
{
"from": "/static",
"to": "static"
},
]

from原资源目录，to打包后资源目录。打包之后会在resources目录下多出static目录。

最后需注意：

1、项目路径最好不要有中文，否则打包可能会报错。

2、最好不要使用getCurrentInstance来操作router或store，打包会报错。

3、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, // 是否启用远程模块
}
149e

好了，基于vite2+electron整合跨端开发模仿抖音exe桌面应用就分享到这里，希望对大家有些帮助哈！😊

最后附上一个Vue3+Electron跨平台仿QQ聊天实例

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