咳咳咳, 记录一下, 防止迷路

官网

www.electronjs.org/

需要具备的条件

了解nodejs相关知识,电脑上有nodejs环境 node官网: nodejs.org/en/

话不多说, 直接上代码

具体步骤

1.初始化项目

npm init

package.json

{
    "name": "myapp",
    "version": "1.0.0",
    "description": "Hello World!",
    "main": "main.js",
    "author": "mmc",
    "license": "MIT"
}

注意:

entry point 应为 main.js.
author 与 description 可为任意值，但对于应用打包是必填项。

2.安装electron

npm install --save-dev electron 在package.json中添加:

"scripts": {
    "start": "electron ."
}

3. 编辑文件

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'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

main.js

/**
 * app 模块, 它控制应用程序的事件生命周期
 * BrowserWindow 模块, 它创建和管理应用程序窗口
 */
const { app, BrowserWindow } = require('electron')
/**
 * 添加一个 createWindow() 方法将index.html加载进一个新的 BrowserWindow 实例
 */
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  /**
   * 打开本地的html页面
   */
  // win.loadFile('index.html')
  /**
   * 打开在线的地址
   */
  win.loadURL('http://www.baidu.com')
}

app.whenReady().then(() => {
  /**
   * 调用 createWindow() 函数打开窗口
   */
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

4.启动与打包

启动: npm start

配置打包

npm install --save-dev @electron-forge/cli
npx electron-forge import

npm run make

最后看效果:

注意: node一定要是最新版本, 不然可能会报错

原文链接: www.electronjs.org/zh/docs/lat…

Electron打包在线网页

官网