The Electron framework, formerly known as the Atom Shell, allows you to write desktop applications that build cross-platform using JavaScript,HTML , and CSS . It is based on io.js and Chromium open source projects and is used in the Atom editor. The Electron is open source, maintained by GitHub, and has an active community. Most importantly, Electron application services are built and run on Mac,windows and Linux.
Installing electron
NPM Install electron-prebuilt-g //cnpm Install electron-prebuilt-g
Run after installation is complete
Electron-v // view electron version
This Rep Ositor y
git clone https: // Github.com/electron/electron-quick-start # Go into the REPOSITORYCD electron-quick-&& npm start
The electron application consists of three parts:
1. Package.json Dependent files
2. Index.html Application Page
3. Main.js or renderer.js the main process or render process
Electron application consists of the main process and the rendering process, the main process is the main process, mainly responsible for interacting with the system GUI, the rendering process is renderer for page rendering, the main process and the rendering process through the IPC module to communicate.
Main.js Code:
'Use Strict';ConstElectron = require ('Electron');ConstApp =Electron.app;ConstBrowserwindow =Electron. Browserwindow;let mainwindow;function CreateWindow () {MainWindow=NewBrowserwindow ({width: -, Height: -}); //Mainwindow.loadurl ('http://www.baidu.com/`);Mainwindow.loadurl (' File://${__dirname}/index.html '); //mainWindow.webContents.openDevTools ();Mainwindow.on ('closed', function () {MainWindow=NULL; });} App.on (' Ready', CreateWindow); App.on ('window-all-closed', () = { if(Process.platform!=='Darwin') {app.quit (); }}); App.on ('Activate', () = { if(MainWindow = = =NULL) {CreateWindow (); }});
Index.html:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>My app</title></Head><Body>we are using Nodejs<Script>document.write (process.version)</Script>and Electron<Script>document.write (process.versions['Electron']) require ('./renderer.js')</Script></Body></HTML>
Final effect:
Developing desktop applications with electron
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
