electron创建应用

开发环境

node v22.14.0

npm 10.9.2

创建目录win-master
进入当前目录npm init
修改生成的pachage.json补充author和description内容

根据配置项中的"main": "index.js" 在根目录下创建index.js

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

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

  })

  win.loadFile('index.html') //加载本地文件 
  //win.loadURL('http://') //加载url

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
  app.setLoginItemSettings({openAtLogin:true}) //开机启动
})

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

创建index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <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>标题</title>
    <meta http-equiv="refresh" content="0;url=http://plugin.deepbit.cn">
  </head>
  <body>
    <h1>加载中...</h1>
  </body>
</html>

执行 npm install electron --save-dev 安装electron如果执行慢参考http://qa.anyline.org/v/2b_15281

添加配置项启动脚本

"scripts": {

"start": "electron ."
}
启动npm start

生成安装文件
npm install electron-builder -D
配置项scripts中添加"build":"electron-builder"

外层添加buil，完整的package.json

{
  "name": "win-master",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "build":"electron-builder"
  },
  "build":{
    "appId":"cn.deepbit.plugin",
    "win":{
      "icon":"./logo.ico",
      "target":[
        {
          "target":"nsis",
          "arch":["x64"]
        }
      ]
    },
    "nsis":{
      "oneClick":false,
      "perMachine":true,
      "allowToChangeInstallationDirectory":true
    }
  },
  "author": "anyline",
  "license": "ISC",
  "description": "插件平台",
  "devDependencies": {
    "electron": "^35.1.4"
  }
}

执行npm run build

执行后在dist目录中会生成setup.exe安装文件

工作笔记

electron创建应用