Scene description

Update 2020-04-28: The flash 30 version should be replaced with version 29 due to the failure of the message “failed to load necessary components correctly” after the flash 30 version. —

Electron references the flash plug-in packaging example

As mentioned in the previous article, the problem of electron flash loading is that the flash plug-in installed by the loading system is adopted, which can work properly only after the user installs the Flash in advance

app.commandLine.appendSwitch('ppapi-flash-path', app.getPath('pepperFlashSystemPlugin'));
Copy the code

App.getpath (‘pepperFlashSystemPlugin’) will automatically find the path of the system flash. However, if the user opens the application without flash, an error message will be displayed, bringing bad user experience. We need to embed Flash into the application dependencies, which are plug-ins packaged with the application

Windows has 32-bit and 64-bit versions, and the installation location varies. Flash is no exception

C:\Windows\System32\Macromed\Flash\pepflashplayer64_29_0_0_238.dll
C:\Windows\SysWOW64\Macromed\Flash\pepflashplayer32_29_0_0_238.dll
Copy the code

Of course, the version number above will change, but the DLL will basically be located as shown above. Once we find the flash directory, we can extract the file and put it in our application directory. When compiled, it will become part of the application installation package, so that users don’t need to manually install Flash 🔥 so, How do I do it in electron?

Problem solving

Place the Flash plug-in directory in the lib folder of the root directory

/lib/pepflashplayer64_29_0_0_238.dll
/lib/pepflashplayer32_29_0_0_238.dll
Copy the code

/ SRC /main/index.js to get the system flash plugin path code

app.commandLine.appendSwitch('ppapi-flash-path', app.getPath('pepperFlashSystemPlugin'));
Copy the code

Change for

let flashPlugins = process.arch == 'x64' 
  ? require('path').resolve(__dirname, '.. /.. /lib/pepflashplayer64_29_0_0_238.dll')
  : require('path').resolve(__dirname, '.. /.. /lib/pepflashplayer32_29_0_0_238.dll')
app.commandLine.appendSwitch('ppapi-flash-path', flashPlugins);
Copy the code

If BrowserWindow is used:

const mainWindow = new BrowserWindow({
    height: 900.width: 1600.useContentSize: true.frame: false.center: true.fullscreenable: false.// Whether to allow full screen
    center: true.// Whether it appears in the center of the screen
    title: 'Electron applications'.backgroundColor: '#fff'.// Background color for Transparent and Frameless Windows
    titleBarStyle: 'hidden'.// Title bar styles include Hidden, hiddenInset, customButtonsOnHover, etc
    resizable: false.// Whether the stretch size is allowed
    webPreferences: {    // Configure web parameter options
      plugins: true.// Start the plug-in
      webSecurity: false./ / security
      defaultFontFamily: {      // The font is relevant
        standard: "Microsoft YaHei".defaultEncoding: "utf-8"}}})Copy the code

Plugins: True is a mandatory configuration, which tells Electron to use the plug-in and then the package.json configuration, which is configured under the Build TAB

"build": {... ..."win": {
      "icon": "build/icons/icon.ico"."extraResources": "./lib/*.dll"    // Exclude specific files from the asAR package},... ... }Copy the code

Another problem is that the download speed of the three packages required for application packaging is very slow when the application is packaged for the first time, which leads to poor experience and requires image configuration.

"build": {
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron/"}},Copy the code

/ SRC /main/index.js is the complete code

import { app, BrowserWindow } from 'electron'
import express from 'express'

if(process.env.NODE_ENV ! = ='development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g.'\ \ \ \')}// the packaged files are loaded with the "file://" protocol by default
// because flash does not allow loading in the "file://" protocol, to solve flash loading security issues
// Use Express as a local server so that pages run on the local HTTP port service
function localServer() {
  let server = express();
  server.use(express.static(__dirname));
  server.listen(9080);
}

if (process.env.NODE_ENV === "production") {
  localServer();
}

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  // Dev service port configured for webpack
  ? `http://localhost:9080`
  // : `file://${__dirname}/index.html`
  // resolve flash not allowing loading in the "file://" protocol
  : `http://localhost:9080/index.html`

let flashPlugins = process.arch == 'x64' 
  ? require('path').resolve(__dirname, '.. /.. /lib/pepflashplayer64_29_0_0_238.dll')
  : require('path').resolve(__dirname, '.. /.. /lib/pepflashplayer32_29_0_0_238.dll')

if (__dirname.includes(".asar")) {
  flashPlugins = process.arch == 'x64' 
    ? require('path').join(process.resourcesPath + '/lib/pepflashplayer64_29_0_0_238.dll')
    : require('path').join(process.resourcesPath + '/lib/pepflashplayer32_29_0_0_238.dll')
}
app.commandLine.appendSwitch('ppapi-flash-path', flashPlugins);
app.commandLine.appendSwitch('ppapi-flash-version'.'29.0.0.238');

function createWindow () {
  /** * Initial window options */
  mainWindow = new BrowserWindow({
    height: 900.width: 1600.useContentSize: true.frame: false.center: true.fullscreenable: false.// Whether to allow full screen
    center: true.// Whether it appears in the center of the screen
    title: 'Electron applications'.backgroundColor: '#fff'.// Background color for Transparent and Frameless Windows
    titleBarStyle: 'hidden'.// Title bar styles include Hidden, hiddenInset, customButtonsOnHover, etc
    resizable: false.// Whether the stretch size is allowed
    webPreferences: {
      plugins: true.webSecurity: false.defaultFontFamily: {
        standard: "Microsoft YaHei".defaultEncoding: "utf-8"}}})if (process.env.NODE_ENV == 'development') {
    mainWindow.webContents.openDevTools()
  }
  
  mainWindow.loadURL(winURL)

  mainWindow.on('closed'.() = > {
    mainWindow = null
  })

}

app.on('ready', createWindow)

app.on('window-all-closed'.() = > {
  if(process.platform ! = ='darwin') {
    app.quit()
  }
})

app.on('activate'.() = > {
  if (mainWindow === null) {
    createWindow()
  }
})
Copy the code

End