This is the 8th day of my participation in Gwen Challenge

Program source code

Electron how to play

It is really very simple, facing Baidu programming, looking for the footsteps of predecessors, it is really easy. 😄

Just go straight. Turn it round

Install Electron first, but there’s a crater

Pit is the installation is stuck, nothing has a way:

npm config set registry=https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
Copy the code

I’m sure you’ve done the first line.

The second line is critical, because if you don’t set it, it will get stuck at the end and keep loading. 🤦

Then create it in the root directory of the projectmain.js

/* main.js */
const { app, BrowserWindow } = require('electron')
const path = require('path')
const ipc = require('electron').ipcMain
const http = require('http');
const qs = require("qs")
const os = require('os');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
let server;

const initServer = () = > {
    server = http.createServer(function (request, response) {
        // A post variable is used to hold information about the request body
        let post = ' ';
        // Req's data event listener adds data to the POST variable whenever it receives data from the request body
        // Triggered when there is a data request
        request.on('data'.function (data) {
            post += data;
        });
        // After the end event is triggered, the POST is parsed to the true POST request format via QueryString.parse and then returned to the client.
        request.on('end'.function () {
            // Parse to a POST object
            post = JSON.parse(post);
            // Convert an object to a string
            response.writeHead(200, { 'Content-Type': 'text-plain' });
            response.end('{"status":200}\n');
            mainWindow.webContents.send("flightdata", post)
        });
    }).listen(8124);
}


const createWindow = () = > {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        fullscreen: false.webPreferences: {
            nodeIntegration: true.contextIsolation: false}});// and load the index.html of the app.
    mainWindow.loadFile("./build/index.html");

    // mainWindow.maximize()
    mainWindow.removeMenu()
    // mainWindow.webContents.openDevTools()
    mainWindow.webContents.openDevTools({mode:'right'});
    // Emitted when the window is closed.
    mainWindow.on('closed'.() = > {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
};

const initApp = () = > {
    createWindow();
    initServer();
}

// 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.on('ready', initApp);

// Quit when all windows are closed.
app.on('window-all-closed'.() = > {
    // On OS X 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'.() = > {
    // On OS X 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 (mainWindow === null) { createWindow(); }});Copy the code

You don’t have to think about most of this logic, which I’ll cover in a future article, but you just need to know a little bit.

I specified a static web page in mian, what a coincidence! The location is in our package folder build at 🤭.

    // and load the index.html of the app.
    mainWindow.loadFile("./build/index.html");
Copy the code

Then configure package.json

{..."main": "main.js"."homepage": ". /". }Copy the code

Analysis:

The Electron entry file main.js homepage we just created: if this is not configured, it will. Em ~~~~ will. Let’s paste the code

.const publicUrlOrPath = getPublicUrlOrPath(
    process.env.NODE_ENV === 'development'.require(resolveApp('package.json')).homepage, process.env.PUBLIC_URL ); .Copy the code

Webpack sets the PUBLIC_URL by using the homepage configured in the package. Otherwise, the screen will be blank!!

Oh, and there’s a big hole. Be careful

If you use the React-Router BrowserRouter, you’ll be blindsided, because nothing will show up, except a “404” page that you’ve arranged in advance, as if you were accessing https://****/index.html directly from a browser. History mode doesn’t work at all. I guess this is a browser trick. Electron doesn’t support it yet.

So make sure you use hash mode

    <HashRouter getUserConfirmation={this.getConfirmation}>
        ...
    </HashRouter>
Copy the code

Finally, let’s configure the startup script

/* package.json */
 "scripts": {..."electron": "electron .". },Copy the code

Now that we’re basically ready, pack a bag and get ready to launch 🚀.

Take a look at the effect

conclusion

As a result, the Moderate of “Chinese” is initially integrated with Electron, which can be packaged into a PC and MAC application with a single command, but please be assured that this is only the first part 🤭, there is a lot to fill in.

Program source code