1. Initialize the node project and generate the Package.json file
NPM Init
2. Install the electron and save it as a development dependency
NPM Install electron-d
3. Create a new Index.js file in the root directory
const {app, Browserwindow} = require (' electron ')) Let MainWindowfunctionCreateWindow () {MainWindow=NewBrowserwindow ({width:800, height:600}) Mainwindow.loadfile (' Index.html ') //MainWindow.webContents.openDevTools ()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 () { //On OS X It's common to re-create a Windows in the app when the //dock icon is clicked and there am no other windows open. if(MainWindow = = =NULL) {CreateWindow ()}})
4. Create a new index.html file in the root directory
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title></Head><Body> <H1>Hello electron!!</H1></Body></HTML>
5. Open the Package.json file and create a new command
"Scripts": { "start": "Electron." }6. Execute the Start command
NPM start
So far, one of the most rough demos has been completed, but this is not enough, as a desktop application, we want to click the EXE file can launch the application directly, rather than open the command line, enter the start command. This step requires a packaging tool to complete.
7. Install Electron Packaging tool Electron-packager
NPM Install Electron-packager-g
8. Configure the Package command
"Scripts": { "start": "Electron." , " Pack ":" Electron-packager. MyClient--win--out. /myclient--arch=x64--app-version=0.0.1--electron-version=2.0.0 " }The command structure is as follows (modified according to the actual situation):
“.” : The application directory that needs to be packaged (that is, the current directory)
"MyClient": App name,
"--win": Packaging Platform (for Windows, for example),
"--out. /myclient ": Output directory,
"--arch=64": 64-bit,
"--app-version=0.0.1": App version,
"--electron-version=2.0.0": Electron version
To execute a package command:
NPM Run Pack
After packaging is complete, locate the output directory and open the folder after packaging is complete.
You can see the executable file that generated the. exe and a bunch of other configuration files, and double-click MyClient.exe to open the application.
Now that we have the green version of the application (no need to install, copy the entire file directory to use), but as a client application, we prefer to be able to get an installation package directly after installation via desktop shortcuts, which requires Inno setup.
9. Download and install Inno Setup
: pc.qq.com/detail/13/detail_1313.html
Open Inno Setup Client after installation is complete
A. File->new, new script
B. Fill in the application information, bold is required
Application Name: application name;
Application version: app versions;
Application Publisher: Distribution unit (optional);
Application websiter: Application URL (optional);
C. Perfecting application file Information
Application Destination Base folder: Application target basic folder, can be customized by default;
Application Folder name: the application folders names;
Allow users to change the application folder: tick, allowing the user to customize the installation location;
D. Specifying files that belong to the application
Application main executable file: Application master execution files, that is, the. exe file that is packaged in step 8th.
Allow users to start the application after Setup has finished: Allows the user to launch the application after installation is complete;
Add folders: Adding the application files, select the 8th step in the packaging of the file root directory, to all the. dll files and other configuration files are included;
When you click Add, you can see:
The file directory is subject to your own actual situation.
E. Specify a shortcut to the application, tick the default two items, "create a shortcut to the main execution program to the Public Start Menu program folder", "Allow users to create desktop shortcuts"
F. Specifying the document files to display during installation
License file: License files;
Information file shown before installation: Displays information files before installation;
Information file shown after installation: Displays information files after installation;
G. Specify the installation language that should be included (Chinese version has simplified Chinese option), click Next after selecting
H. Specifying basic compilation settings
Custom Compiler output folder: Customize the compiler export folders, that is, the final compilation of the installation package where to put;
Compiler Output Base file name: The editor outputs the base filename, which is the installation package name;
Custom Setup Icon file: Customized installer icon files;
Setup password: install password;
I. Click Next
The rest is determined all the way, will ask you to save your script before compiling (the configuration steps above, will eventually generate a compilation script file), click Save, do not compile, open the script file, add the configuration, modify the registry, set the boot from:
string; ValueName: "TestRun"; Valuedata: "{app}\{#MyAppExeName}"Then, execute the compiled file: build->compile
At this point, all the steps have been completed, to see if your installation package can not be used properly.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
