有趣的electron(一)

跟我一起实现一个基于electron的hello-world吧～
先看图

由图我们可以看出什么来？
electron的项目是可以不运行在浏览器中的对吧，是不是挺有意思的啊？
我们先看怎么实现这个小demo的吧～
第一步： mkdir hello-electron /cd hello-electron/sudo cnpm install -g electron
第二步：我们新建三个文件

index.html
<html>
  <head>
    <title>Hello World</title>
    <style>
      body {
        background-image: linear-gradient(45deg, #EAD790 0%, #EF8C53 100%);
        text-align: center;
      }
      button {
        background: rgba(0,0,0,0.40);
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.50);
        border-radius: 8px;
        color: white;
        padding: 1em 2em;
        border: none;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 14pt;
        position: relative;
        top: 40%;
        cursor: pointer;
        outline: none;
      }
      button:hover {
        background: rgba(0,0,0,0.30);
      }
    </style>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css' />
    <script>
      function sayHello () {
        alert('Hello World');
      }
    </script>
  </head>
  <body>
    <button onclick="sayHello()">Say Hello</button>
  </body>
</html>

package.json
{
    "name" : "hello-world",
    "version" : "1.0.0",
    "main" : "main.js"
}

main.js
'use strict';

const electron = require('electron');
const app = electron.app;                                               
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

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

app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on('closed', () => { mainWindow = null; });
});

第三步：运行项目 electron .
这样我们就很轻松的实现了我们的hello world 啦

猜你喜欢