Electron Create desktop applications

Electron Create desktop applications

Electron Create desktop Application Add Taobao NPM mirrored install electron create application Packagejson MAINJS indexhtml Run application

add Taobao NPM Mirror

Do not say anything, before work to add Taobao NPM mirror image, or behind the installation module will be stuck.

$ sudo npm install-g cnpm--registry=https://registry.npm.taobao.org

Install electron

Here I am using the global

$ sudo cnpm install-g electron

Create an application

The directory structure of a electron application is roughly as follows:

myapp/
├──package.json
├──main.js
└──index.html

Package.json

{
  "name": "MyApp", "
  Version": "0.1.0",
  "main": "Main.js",
  "scripts": {
    "start": "Electron Main.js "
  }
}

Main.js

const {app, Browserwindow} = require (' electron ');
Const PATH = require (' path ');
Const URL = require (' URL ');

Let win;

function CreateWindow () {
  win = new Browserwindow ({width:800, height:600});

  Win.loadurl (Url.format ({
    pathname:path.join (__dirname, ' index.html '),
    protocol: ' File: ',
    slashes: True
  });

  Win.on (' Closed ', () => {
    win = null;
  });

App.on (' Ready ', CreateWindow);

App.on (' window-all-closed ', () => {
  if (process.platform!== ' Darwin ') {
    app.quit ();
  }
});

App.on (' Activate ', () => {
  if (win = = null) {
    CreateWindow ();
  }}
);

index.html

<! DOCTYPE html>
 
Run the application 
Go to the application directory and run

$ electron.
 
In addition, as we have defined in the Package.json file

  ...
  " Scripts ": {
    " start ":" Electron Main.js "
  }
 
So you can also use NPM to run

$ NPM Install
$ npm Start