electron 集成react

不念不忘少年蓝@ 2021-07-24 16:20 422阅读 0赞

**1、创建react项目**  
npx create-react-app 项目名称

**2、安装electron**  
cnpm i electron --save

**3、在package.json 中添加**  
“main”: “main.js”,  
“homepage”: “.”,  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
**4、在package.json的script中添加脚本命令**  
“electron-dev”: “electron . dev”,  
“electron”: “electron .”,

这里一个是使用electron运行开发时候的脚本加了 dev的参数，后面会根据传入的这个参数，在主进程中做一层判断  
如果是开发环境的话，那么主进程loadURL就会加载 http://localhost:3000/地址  
如果是打包之后的环境就会加载打包文件夹的地址（这里打包是放在build文件夹下，所以会加载’./build/index.html’地址）

**5、与package.json同级添加main.js文件**

// Modules to control application life and create native browser window
    const { app,Menu, BrowserWindow,BrowserView,globalShortcut,ipcMain} = require('electron')
    const path = require('path')
    const url = require('url');
    
    // 获取在 package.json 中的命令脚本传入的参数，来判断是开发还是生产环境
    const mode = process.argv[2];
    
    function createWindow () { 
      // Create the browser window.
      const mainWindow = new BrowserWindow({ 
        width: 800,
        height: 600,
        //弹出的窗口有无边框,默认为有
        // frame:false,
        show:false,
        backgroundColor:'#586148',
        webPreferences: { 
          preload: path.join(__dirname, 'preload.js'),
          nodeIntegration:true,
          webviewTag:true
        },
      })
    
      // and load the index.html of the app.
      //mainWindow.loadFile('index.html')
      
      //判断是否是开发模式 
      if(mode === 'dev') {  
        mainWindow.loadURL("http://localhost:3000/")
      } else {  
        mainWindow.loadURL(url.format({ 
          pathname:path.join(__dirname, './build/index.html'), 
          protocol:'file:', 
          slashes:true 
        }))
      }
    	
      mainWindow.webContents.on("did-finish-load",()=>{ 
          
      })
      mainWindow.webContents.on('dom-ready',()=>{ 
       
      })
      mainWindow.once('ready-to-show',function(){ 
        mainWindow.show();
      })
    
    
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    // app.whenReady().then(createWindow)
    app.on('ready',()=>{ 
    
      createWindow();
    
    
    });
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function () { 
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
    
      if (process.platform !== 'darwin') app.quit()
    })
    
    app.on('activate', function () { 
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
    
    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.

**6、和main.js同级添加preload.js**

// All of the Node.js APIs are available in the preload process.
    // It has the same sandbox as a Chrome extension.
    window.addEventListener('DOMContentLoaded', () => { 
      const replaceText = (selector, text) => { 
        const element = document.getElementById(selector)
        if (element) element.innerText = text
      }
    
      for (const type of ['chrome', 'node', 'electron']) { 
        replaceText(`${ type}-version`, process.versions[type])
      }
    })

7、启动electron项目  
(1)npm start 启动react项目  
(2)npm run electron-dev 启动electron应用  
修改代码react代码会热更新  
(3)如果react打包后，运行 npm run electron 这个时候electron 加载的就是 build/index.html文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]  
8、打包react  
npm run-script build  
此时npm run electron运行的就是打包后的react项目

9、打包electron  
(1)安装electron-packager  
npm install electron-packager --save-dev  
npm install electron-packager -g

(2)在package.json的"scripts"中添加  
“pack”: “electron-packager . 此项目名称 --win --out ./打包后名称 --electron-version=8.2.4(版本号)”

(3)复制main.js和package.json文件到打包react后的build文件下

(4)npm run pack打包最后的应用程序

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200503201013339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200503203333681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70