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内容如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

更改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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值