Last month, I shared a project of the Electron cross-terminal imitation QQ chat application. Today we bring the newly developed Electron+Vite2 cross-end short video + live application for actual combat.

Vite2 -electron- Douyin based on vitE2 construction tool integration electron cross-platform technology development of a copy of Douyin short video + chat + live application EXE software. Support keyboard up and down key switching effect, new open multiple Windows and other functions.

Technology stack

  • Build tool: viet.js
  • Vue3 Family bucket: vue3.0+vuex4+vue-router@4
  • Cross-end framework: Electron12.0.1
  • Package tool: vuE-cli-plugin-electron – Builder
  • Component library: VANT3 (VuE3 component library on mobile)
  • Shell component: V3Popup (VUe3 package mobile popup component)
  • Sliding component: Swiper6

The project structure

At present, the latest stable version of ELECTRON is V12.0.2, which is used in the project.

www.electronjs.org/

The Electron main process entrance is configured

For projects built using electron builder, there is a background.js configuration file in the root directory.

/**
 * 主进程入口配置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()
    })
  }
}
Copy the code

The Electron+Vue3 drag-and-drop navigation bar +TabBar TabBar

The whole project uses frame: false without borders. In order to drag the window, you need to customize the drag area.

Drag and drop is implemented by setting -webkit-app-region:drag.

< num ="transparent" transparent> <template # WBTN > <a class=" WBTN "title=" @click="isShowPersonalCard=true">< I class="iconfont iconweima "></ I ></a> <a class=" WBTN "title=" set" @click="isShowSideMenu=true"><i class="iconfont icon-menu"></i></a> </template> </WinBar> <WinBar bgcolor="linear-gradient(to right, #36384a, # 36384A)"> <template #title> Video preview </template> <template # WBTN >< a class=" WBTN "title=" save as" @click="handleDownLoad">< I class="iconfont icon-down"></i></a> </template> </WinBar>Copy the code

The bottom Tabbar features a hollowed-out background and a progress bar.

<tabbar bgcolor="linear-gradient(to bottom, transparent, Rgba (0,0,0,.75))" color="rgba(245,255,235,.75)"Copy the code

Specific implementation, you can go to see the following article to share.

Vue3 + electron custom navigation bar | button in the top right corner

The vuE3 + ELECTRON custom pop-up function

Pop-ups in the project are divided into vuE3 custom components and ELECTRON create pop-ups.

const handleSendFlower = () => { let $el = v3popup({ type: 'android', content: '< I class="iconfont icon-douzi C-00e077 "></ I > Sure to send a wechat bean? ', BTNS: [{text: 'cancel', click: (a) = > $el. The close ()}, {text: 'sure, style:' color: # fa367a; ', click: handleOk},]})}Copy the code

Const handleAboutWin = () => {data.isshowsidemenu = false createWin({title: 'about', route: '/about', width: 420, height: 0) const handleAboutWin = () => {data.isshowsidemenu = false createWin({title:' about', route: '/about', width: 420, height: 0) 320, resize: false, parent: winCfg.window.id, modal: true, }) }Copy the code

Viet. js+Electron packing parameters

For projects built by @vue/ CLI, you can configure the electron packing parameter in vue.config.js. The viet.js built project cannot be configured in viet.config. js, but luckily electron provides an electric-Build.json configuration file.

Create a new electron- Builder. json configuration file in the root directory.

/** * @desc Vite2 +electron pack configuration * @time Andy by 2021-03 * @about Q: 282310962 wx: xy190310 */ {"productName": "Electron - douyin", / / project name Packaging generated exe prefix name "appId" : "com. Example. Electrondouyin", / / package name "compression will" : "Maximum", / / store | normal | maximum compression packaging is fast (store) "artifactName" : "${productName} - ${version} - ${platform} - ${arch}. ${ext}", / / packaging after installation package name / / "directories" : {/ / "output" : "Build ", // output folder (default dist_electron) //}, "asar": false, / / asar/packaging/copy static resource directory to the specified location (such as the root directory of the static folder copy to pack after dist_electron/win - unpacked/resources/static directory) "extraResources" : : [{" from "/" static ", "to" : "static"},], "nsis" : {" oneClick ": false, / / a key installation" allowToChangeInstallationDirectory ": "ArtifactName ": "artifactName": "artifactName": "artifactName": ${productName}-${version}-${platform}-${arch}-setup.${ext}", "CreateDesktopShortcut ": true, // Create desktop icon "createStartMenuShortcut": true, // Create start menu icon "shortcutName": "ElectronDouYin", // desktop shortcut icon name}, "win": {"icon": "/static/shortcut.ico", // icon path}}Copy the code

This way, you can pack by running NPM Run Electron: Builder.

Ending, using Vite2 +electron to imitate Douyin short video/broadcast app share here.

Cross platform simulation QQ chat room with electron+vue3+ ANTDV