Node.js|Electronは簡単なElectronを開発した.

8696 ワード

初めてElectronを使って、最初に走ったアプリを記録します

一、まずNodeをインストールする.js長期サポート版


https://nodejs.org/zh-cn/

二、Electronのインストール(グローバル)

npm install electron -g

三、新しい空のフォルダ(my-app)


フォルダの下でコマンドライン入力を開く
npm init

このときフォルダの下にpackage.jsonのファイルが1つ増えました
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

四、ロード依存、コマンドライン入力

npm install

五、新しいmain.js

const { app, BrowserWindow } = require('electron')

function createWindow() {
  //        
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  //   index.html  
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

六、新しいindex.html(自分で表示するページ)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

七、起動、コマンドラインに入力

npm start