# 场景描述
– 2020-04-28 更新：由于 flash 30 版本以后会出现提示“未能正确加载必要组件”（其实是广告程序），导致失效，flash 版本应该替换为 29 版本。–
上一篇 electron 踩坑(一) 说到 electron 加载 flash 的问题
采用的是加载系统安装好的 flash 插件，需要用户提前安装好 flash 才能正常工作1
app.commandLine.appendSwitch('ppapi-flash-path', app.getPath('pepperFlashSystemPlugin'));
其中 app.getPath('pepperFlashSystemPlugin') 会自动找寻系统 flash 的所在路径
但是，如果用户没装 flash 就打开应用，就会提示报错，带来不好的用户体验
所以，我们需要将 flash 嵌入应用依赖，也就是插件跟着应用打包
win 下面的软件有 32 位和 64 位的说法，而且安装位置会有不同。那么 flash 也不例外1
2C:\Windows\System32\Macromed\Flash\pepflashplayer64_32_0_0_238.dll
C:\Windows\SysWOW64\Macromed\Flash\pepflashplayer32_32_0_0_238.dll
当然，上面版本号会变化，但是 dll 所在路径基本是如上所示
找到 flash 所在路径后，我们就可以提取文件放到我们的应用目录下了
编译后就会成为应用安装包的一部分，这样就不需要用户手动安装 flash 了
🔥 那么，在 electron 目录下应该如何引入呢？
# 问题解决
将 flash 插件目录放到根目录的 lib 文件夹下1
2/lib/pepflashplayer64_32_0_0_238.dll
/lib/pepflashplayer32_32_0_0_238.dll
接下来需要在主程序入口文件 /src/main/index.js 下进行引入
也就是将这一句获取系统 flash 插件路径的代码1
app.commandLine.appendSwitch('ppapi-flash-path', app.getPath('pepperFlashSystemPlugin'));
换为1
2
3
4let flashPlugins = process.arch == 'x64'
? require('path').resolve(__dirname, '../../lib/pepflashplayer64_32_0_0_238.dll')
: require('path').resolve(__dirname, '../../lib/pepflashplayer32_32_0_0_238.dll')
app.commandLine.appendSwitch('ppapi-flash-path', flashPlugins);
如果使用的是 BrowserWindow：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21const mainWindow = new BrowserWindow({
height: 900,
width: 1600,
useContentSize: true,
frame: false,
center: true,
fullscreenable: false, // 是否允许全屏
center: true, // 是否出现在屏幕居中的位置
title: 'Electron应用',
backgroundColor: '#fff', // 背景色，用于transparent和frameless窗口
titleBarStyle: 'hidden', // 标题栏的样式，有hidden、hiddenInset、customButtonsOnHover等
resizable: false, // 是否允许拉伸大小
webPreferences: { //配置web参数选项
plugins: true, //开启插件
webSecurity: false, //安全
defaultFontFamily: { //字体相关
standard: "Microsoft YaHei",
defaultEncoding: "utf-8"
}
}
})
其中，plugins: true 是必须要配置的，这是告诉 electron 需要使用插件
然后就是打包配置 package.json，在 build 项配置下面内容1
2
3
4
5
6
7
8
9
10"build": {
……
……
"win": {
"icon": "build/icons/icon.ico",
"extraResources": "./lib/*.dll" //将特定的文件排除，不打包在asar包内
},
……
……
}
至此，开发模式和生产模式下都是可以成功运行的
以下是 /src/main/index.js 完整代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83import { app, BrowserWindow } from 'electron'
import express from 'express'
if (process.env.NODE_ENV !== 'development') {
global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}
//解决flash本地file不安全问题，express用作本地服务器
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'
? `http://localhost:9080`
// : `file://${__dirname}/index.html`
//解决flash在file下不安全的问题
: `http://localhost:9080/index.html`
let flashPlugins = process.arch == 'x64'
? require('path').resolve(__dirname, '../../lib/pepflashplayer64_32_0_0_238.dll')
: require('path').resolve(__dirname, '../../lib/pepflashplayer32_32_0_0_238.dll')
app.commandLine.appendSwitch('ppapi-flash-path', flashPlugins);
app.commandLine.appendSwitch('ppapi-flash-version', '32.0.0.238');
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 900,
width: 1600,
useContentSize: true,
frame: false,
center: true,
fullscreenable: false, // 是否允许全屏
center: true, // 是否出现在屏幕居中的位置
title: 'Electron应用',
backgroundColor: '#fff', // 背景色，用于transparent和frameless窗口
titleBarStyle: 'hidden', // 标题栏的样式，有hidden、hiddenInset、customButtonsOnHover等
resizable: false, // 是否允许拉伸大小
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()
}
})
🧐 End
