为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

项目介绍

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

图片描述

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

img

图片描述

实现技术

  • 编码工具: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跨端仿抖音实战项目就分享到这里。😀

图片描述

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
94

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消