electron 学习1

1.新建一个空的目录，比如test0316，进入该目录，新建三个文件

大体上，一个 Electron 应用的目录结构如下：

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

先手动新建main.js和index.html两个文件。

然后，在目录test0316下执行npm init 初始化该项目

按提示输入相关信息后，会自动生成文件package.json

2.安装依赖；

npm install electron-prebuilt --save-dev

 3.安装完，看到test\node_modules\.bin\electron.cmd 命令脚本

如果第一步在配置test内容时，没有输入正确的“electron .”，则需要手动打开package.json文件，修改test内容，形如：

"scripts": {
    "test": "electron ."
  },

4.在当前目录下，就可以直接在命令行中执行：“electron .”，运行正常

5.npm run test 运行错误，提示

App threw an error during load
TypeError: app.whenReady is not a function

ELECTRON官网说明。链接：

​​​​​​​Building your First App | Electron

个人整理的步骤：

1.

md my-electron-app && cd my-electron-app
cnpm init

完成后，需要额外入口点文件：main.js（需要手工输入相关内容）

2.

cnpm install electron --save-dev

3.

生成的package.json文件形如：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^19.0.0"
  }
}

 4.cnpm run start

成功

5.加载一个web页到BrowserWindow

index.html内容如下：

  
    
    
    
    
    
  
  
    
Hello from Electron renderer!
    

  

更改main.js文件内容如下：

 

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

 js代码说明如下：

一。In the first line, we are importing two Electron modules with CommonJS module syntax:

• app, which controls your application's event lifecycle.
• BrowserWindow, which creates and manages app windows.

二。Writing a reusable function to instantiate windows​

The createWindow() function loads your web page into a new BrowserWindow instance:

三。Calling your function when the app is ready