Electron+Vite2整合开发vue3.0直播/聊天/小视频应用

2021-03-28 10:30:32 浏览数 (1)

前言

前段时间有给大家分享一个Electron跨端仿QQ聊天，今天带来最新研发的Electron短视频|直播应用。

支持上下拖拽滑动切换视频、键盘上下键切换视频等功能。

vite2-electronDouYin 支持新开多窗口模式。

技术栈

  • vite构建：vite.js2.0
  • vue3全家桶：vue3.0 vuex4 vue-router@4
  • electron框架：electron12.0.1
  • 打包工具：vue-cli-plugin-electron-builde
  • UI组件库：vant3 (有赞vue3移动端组件库)
  • 弹框组件：v3popup (vue3移动端弹窗组件)
  • 轮播图组件：swiper^6.5

项目结构

采用vite.js和electron-builder构建的项目目录结构如下

vant3.x移动端vue3组件库

有赞前端推出的vue3移动端UI组件库。

安装组件

代码语言：javascript复制
# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

快手上手

代码语言：javascript复制
import { createApp } from 'vue';
import { Button } from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Button);

也支持CDN引入和按需引入组件。

Electron主进程入口

代码语言：javascript复制
/**
 * 主进程配置文件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渲染进程入口

代码语言：javascript复制
/**
 * 渲染进程入口配置
 */
 
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'
import '@/assets/js/fontSize'
 
// 引入公用样式
import '@/assets/fonts/iconfont.css'
import '@/assets/css/reset.css'
import '@/assets/css/layout.css'
 
loadWin().then(args => {
    winCfg.window = args
    createApp(App)
    .use(Router)
    .use(Store)
    .use(Plugins)
    .mount('#app')
})

Vue3 Electron自定义顶部栏 全屏底部Tabbar

为了保持项目的整体UI一致性，采用了无边框frame:false窗口模式。

通过使用css3的-webkit-app-region: drag来实现自定义拖拽区域。

代码语言：javascript复制
<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组件采用了全透明镂空设计，搭配了视频播放进度条。

代码语言：javascript复制
<tabbar 
    bgcolor="linear-gradient(to bottom, transparent, rgba(0,0,0,.75))"
    color="rgba(245,255,235,.75)"
    activeColor="#fa367a"
    fixed
/>

vite.js electron打包参数配置

由于vite.js构建的项目不能在vite.config.js中配置electron打包参数。需要在项目根目录下新建一个electron-builder.json打包配置文件。

代码语言：javascript复制
/**
 * @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，打包会报错。
  • 在渲染进程中.vue页面，调用ipcRenderer或remote会报如下错误

Uncaught TypeError: fs.existsSync is not a function 

可在webPreferences中配置preload来解决。

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

好了，使用vitejs electron12跨端开发抖音桌面端短视频/直播项目就分享到这里。希望对大家有所帮助哈！

electron vue.js

0 人点赞