Electron12仿抖音|vite2+electron+swiper电脑版小视频|直播

随着vite2的发布，越来越多的开发者整合vite.js+electron开发跨平台应用项目。今天带来最新开发的Electron仿抖音短视频程序。💪

项目介绍

基于vite.js构建工具+electron跨端技术开发vue3仿抖音短视频应用ElectronDouYin。使用了vite2+vue3+electron+swiper+vant3等技术开发。

支持键盘上下键切换短视频、新开多窗口等功能。

实现技术

• 编码工具：Vscode+Notepad++
• 框架技术：Vite2.1+Electron12.0.1+Vuex4+VueRouter@4
• 组件库：vant3 (移动端vue3组件库)
• 打包工具：vue-cli-plugin-electron-builder
• 轮播组件：swiper^6.5.0
• 弹窗插件：v3popup（基于vue3自定义弹层组件）

项目结构

项目使用的是electron最新稳定版v12.0.1版本。

vue3+electron拖拽导航条

项目使用了无边框frame:false模式，只能通过自定义拖拽区域来实现拖动窗口。

通过css3的-webkit-app-region可以实现自定义拖拽元素。

封装后的导航组件，调用非常简单。

<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主进程入口

/**
 * 主进程配置文件
 */
'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实现弹窗功能

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

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

由于之前有过一些相关技术分享文章，这里就不详细介绍了。

OK，基于vite2+electron跨端仿抖音实战项目就分享到这里。😀