乐趣区

关于react.js:在React中使用Electron

jiezi

本文用于记录在 react-create-app 生成的 react 我的项目中配置 electron 的步骤。
残缺我的项目见 github
成果：

  1. 应用 react-create-app 生成 react 我的项目。
  2. 装置 electron：
    npm install electron
    如果装置过程中在 install.js 出错，可参考：解决装置 electron 卡在 node install.js 不动问题。

  3. 在 package.json 中的最外层退出:

    "homepage": "./",
"main": "main.js",

    如图：

  4. 在 package.json 中的 scripts 内退出：
    "electron": "electron ."
    如图：
  5. 应用 npm run build 命令打包，在根目录的 build 文件夹下生成 react 我的项目的 index.js 文件，用于 electron 的渲染过程拜访。
  6. 在我的项目的根目录下（即与 src 同级处）新建一个文件 main.js。文件的内容如下：
// 引入 electron 并创立一个 Browserwindow
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
// 放弃 window 对象的全局援用, 防止 JavaScript 对象被垃圾回收时, 窗口被主动敞开.
let mainWindow

function createWindow () {
// 创立浏览器窗口, 宽高自定义
mainWindow = new BrowserWindow({width: 800, height: 600})
  /* 
   * 加载利用 -----  electron-quick-start 中默认的加载入口
   */
    mainWindow.loadURL(url.format({
      // 应用 npm run build 生成的 index.html 的路径名
      pathname: path.join(__dirname, './build/index.html'),
      protocol: 'file:',
      slashes: true
    }))
  
  // 关上开发者工具，默认不关上
  // mainWindow.webContents.openDevTools()

  // 敞开 window 时触发下列事件.
  mainWindow.on('closed', function () {mainWindow = null})
}

// 当 Electron 实现初始化并筹备创立浏览器窗口时调用此办法
app.on('ready', createWindow)

// 所有窗口敞开时退出利用.
app.on('window-all-closed', function () {
  // macOS 中除非用户按下 `Cmd + Q` 显式退出, 否则利用与菜单栏始终处于活动状态.
  if (process.platform !== 'darwin') {app.quit()
  }
})

  app.on('activate', function () {
    // macOS 中点击 Dock 图标时没有已关上的其余利用窗口时, 则通常在利用中重建一个窗口
   if (mainWindow === null) {createWindow()
   }
 })
退出移动版