Windows Electron初探

時間 2019-11-18

原文原文鏈接

最近閒來無事，玩玩electron。html

一、安裝nodejsnode

下載地址：http://nodejs.cn/download/，下載64位。安裝完成後，打開C:\Program Files\nodejs\node_modules\npm目錄，編輯npmrc文件，添加electron_mirror="https://npm.taobao.org/mirrors/electron/"。添加Electron的鏡像。npm

二、新建文件夾DesktopApp，而後新建三個文件：json

main.js 主邏輯文件app

index.html 頁面文件electron

package.json nodejs標準文件ui

在DesktopApp文件夾下，運行npm install electron。安裝完成後，自動生成：package-lock.json和node_modules文件夾。spa

三、main.js文件code

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

var mainWindow = null;

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

app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

四、package.json文件orm

{
  "name": "DesktopApp",
  "version": "0.1.0",
  "main": "main.js",
  "dependencies": {
    "electron": "^1.6.11"
  }
}

五、index.html文件

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>