关于electron:Electron-踩坑记录二

场景形容

— 2020-04-28 更新：因为 flash 30 版本当前会呈现提醒“未能正确加载必要组件”（其实是广告程序），导致生效，flash 版本应该替换为 29 版本。–

electron 援用 flash 插件打包示例

上一篇 electron 踩坑 (一) 说到 electron 加载 flash 的问题
采纳的是加载零碎装置好的 flash 插件，须要用户提前装置好 flash 能力失常工作

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

其中 app.getPath('pepperFlashSystemPlugin') 会主动找寻零碎 flash 的所在门路
然而，如果用户没装 flash 就关上利用，就会提醒报错，带来不好的用户体验
所以，咱们须要将 flash 嵌入利用依赖，也就是插件跟着利用打包

win 上面的软件有 32 位和 64 位的说法，而且装置地位会有不同。那么 flash 也不例外

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

当然，下面版本号会变动，然而 dll 所在门路根本是如上所示
找到 flash 所在门路后，咱们就能够提取文件放到咱们的利用目录下了
编译后就会成为利用安装包的一部分，这样就不须要用户手动装置 flash 了
???? 那么，在 electron 目录下应该如何引入呢？

问题解决

将 flash 插件目录放到根目录的 lib 文件夹下

/lib/pepflashplayer64_29_0_0_238.dll
/lib/pepflashplayer32_29_0_0_238.dll

接下来须要在主程序入口文件 /src/main/index.js 下进行引入
也就是将这一句获取零碎 flash 插件门路的代码

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

换为

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);

如果应用的是 BrowserWindow：

const 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 项配置上面内容

"build": {
    ……
    ……
    "win": {
      "icon": "build/icons/icon.ico",
      "extraResources": "./lib/*.dll"    // 将特定的文件排除，不打包在 asar 包内
    },
    ……
    ……
}

还有一个问题比拟困扰的是，在第一次进行利用打包时，打包须要的三个包文件下载速度极慢，导致体验很差，须要再进行镜像配置。

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

至此，开发模式和生产模式下都是能够胜利运行的
以下是 /src/main/index.js 残缺代码

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

if (process.env.NODE_ENV !== 'development') {global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

// 打包后的文件默认是以 "file://" 协定加载的
// 因为 flash 不容许在 "file://" 协定下加载，为了解决 flash 加载的平安问题
// 应用 express 用作本地服务器，使得页面运行在本地 http 端口服务
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'
  // webpack 配置的 dev 服务端口
  ? `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_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, // 是否容许全屏
    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