About why you did Electron
Last year, I saw a lot of tweets on wechat about electron and flutter. I was lazy at that time and didn’t take the initiative to understand relevant knowledge. Recently, colleagues in the department shared some daily repetitive behaviors with shell scripts or Google plug-ins. In my mind, I always logged in TO QQ or wechat every time I uploaded pictures of a specified size, and used the screenshots to capture pictures of the corresponding size. Every time I adjusted the 1px distance, I felt frantic. Electron is the development of desktop application, why not use electron to achieve this function, only input width and height, to generate a specified size of the picture, and then the background color of the picture to specify a custom, do not fill a random color. Ness, having identified his needs, can happily learn
Related versions before starting:
Node: 12.13.0 electron: 8.2.5Copy the codeA, install,
During the installation process, it is found that the install step has been stuck. Currently, the taobao source is found, and some configurations need to be added:
NPM config list Displays the userconfig location
After finding the address of the.npmrc file, add a sentence to that file
electron_mirror="https://npm.taobao.org/mirrors/electron/"
Ok, now you can run NPM install -g electron
Electron provides a sample repository for quick startup
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start
Copy the codeSecond, write,
My daily development habit is React + TS + ANTD, if this environment then the development of functions will be more convenient
Create the React + TS project
create-react-app my-tools --template typescript
cd my-tools
npm start
Copy the codeNow you see the classic React startup page
2. Introduce ANTD and babel-plugin-import
npm install antd --save
npm install babel-plugin-import --save-dev
Install react-app-rewired, cross-env, and customize-cra
npm i -D react-app-rewired cross-env customize-cra
React-app-rewired2.x requires customize-cra installation to modify the WebPack configuration
React-app-rewired/react-app-rewired/react-app-rewired/react-app-rewired/react-app-rewired/react-app-rewired/react-app-rewired
/* package.json */
"scripts": {
"start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test",}Copy the codeCreate a react-app-rewired config file config-overrides. Js to extend the webpack configuration
Antd needs to be loaded on demand
/* config-overrides.js */
const { override, fixBabelImports, } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd", libraryDirectory: "es", style: 'css',}));Copy the code5. Write page code
TSX file, add some style definitions to react-app-env.d.ts, and change tsconfig.json from strict to false.
6. Install the ELECTRON environment and configure the entry file
npm i -D electron
/* main.js */
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow = null;
const createWindow = () => {
let mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,}}); /** * loadURL is divided into two cases * 1. Development environment, pointing to the react development environment address * 2. Production environment, pointing to index.html */ const startUrl = process.env.node_env ==='development'
? 'http://localhost:3000'
: path.join(__dirname, "/build/index.html");
mainWindow.loadURL(startUrl);
mainWindow.on('closed'.function () {
mainWindow = null;
});
};
app.on('ready', createWindow);
app.on('window-all-closed'.function () {
if(process.platform ! = ='darwin') app.quit();
});
app.on('activate'.function () {
if (mainWindow === null) createWindow();
});
Copy the code7. Add related scripts
/* package.json */
"main": "main.js"."author": "xuanye"."description": "Personal Toolset"."scripts": {
"start": "cross-env BROWSER=none react-app-rewired start"."start-electron": "cross-env NODE_ENV=development electron ."."start-electron-prod": "electron ."
},
Copy the code8. Test the effect of the page
A command line window runs the React project
npm run start
Another command line window runs the electron project
npm run start-electron
After startup, the following window will appear
As for why there are two command lines, we have already stated in the main.js file that in the development environment we are loading port 3000. If you do not start the React project, then running the electron command will create an empty desktop application.
Three, packaging,
1. Add the electron builder tool
npm i -D electron-builder
2. Add scripts and package related configurations
Make an icon
The icon name must contain 256
The content of the NSIS configuration item is configured as required
/* package.json */
"homepage": "."// Avoid the situation where resources such as CSS cannot be found"scripts": {
"build-electron": "electron-builder"
},
"build": {// Package name"appId": "com.xxx.xxx"// The project name, which is also the generated installation file name"productName": "Toolset"// Copyright information"copyright": "Copyright © 2020"// An error is reported when the extends is not set to null: Application Entry File"build/electron.js" does not exist
"extends": null,
"directories": {// Output file path"output": "build-electron"
},
"files": [
"./build/**/*"."./main.js"."./package.json"]."win": {// Win-related configurations"icon": "./favicon_256.ico", /* How to name the generated startup file */"artifactName": "${productName}.${ext}"
},
"nsis": {// Whether to install with one click and cannot change the directory, the default istrue
"oneClick": false// Whether permission promotion is allowed. If it isfalse, the user must restart the setup program with the promoted permissions."allowElevation": true, // Whether the installation path can be changed"allowToChangeInstallationDirectory": true// Whether to create desktop ICONS"createDesktopShortcut": true// Create a start menu icon"createStartMenuShortcut": true// Install complete request run"runAfterFinish": true// Install package icon"installerIcon": "./favicon_256.ico"// Uninstall the program icon"uninstallerIcon": "./favicon_256.ico"// Install header icon"installerHeaderIcon": "./build/icons/aaa.ico"// Desktop icon name"shortcutName": "Toolset"}},Copy the code3. Start packing
Install the React project NPM run build.
Run the NPM run start-electron-prod command to check whether the production environment is running properly
After verification, the project can be packaged into the installation package NPM run build-electron. The installation package is stored in the build-electron directory specified in package.json
If the package is slow, download the corresponding package from the official website and decompress it to the local PC
The following error indicates that the file name of the image should contain 256
After packing, I found that I had been stuck in downloading WinCoDesign-2.6.0. Go to https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.6.0 to download the corresponding version winCodeSign (remember to switch to you ), then download the Source Code (zip) file,
And then found to become stuck in NSIS, Go to https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.4.1 to download the corresponding version of the nsis (remember to switch to the version you need), Then download the Source Code (zip) file,
Copy the nSIS-resource folder from the file in the previous step.
Show you the file name you want
Once packed, you will see the build-electron folder in the root directory, which contains the executable EXE file. Click to install
The latter
Author and description are mandatory
The image must be 256 * 256
If nSIS is not configured, the application will be automatically installed on drive C
View the ASAR file
npm install -g asar
The asar extrct command takes two parameters: the first parameter is the ASAR file to be extracted and the second parameter is the path to save the extracted file. “./ “means to put it in the root directory.
