electron： pc端应用

最新推荐文章于 2024-12-01 11:51:26 发布

小强有个dream

最新推荐文章于 2024-12-01 11:51:26 发布

阅读量673

点赞数

分类专栏： electron

本文链接：https://blog.youkuaiyun.com/qq_36413371/article/details/109347010

版权

electron 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用Electron创建跨平台桌面应用的过程，包括创建Electron应用的基本步骤、使用main.js进行配置、加载HTML文件以及如何通过electron-packager和electron-builder等工具进行应用打包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文章： https://zhuanlan.zhihu.com/p/124297174

还有一种思路nw.js
https://blog.youkuaiyun.com/qq_39045645/article/details/89310765

C/S架构 - electron

主进程渲染进程可以实现不同页面的交互
系统托盘
应用程序打包(windows mac)

electron可以调用所有的nodejs的api

一：创建electron
main.js

// 入口函数 需要配置"main": "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)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </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>

package.json

{
  "name": "electron-demos",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "../node_modules/.bin/electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.0.0",
    "electron-builder": "^22.4.1"
  },
  "dependencies": {}
}

npm i
./node_modules/.bin/electron . 即可打开electron应用

在这里插入图片描述

二：打包

Electron 主流的两款打包工具 electron-packager 和 electron-builder。

npm install electron-packager -g
electron-packager .    // electron项目根目录执行即可打包生成exe文件

三：生成单个exe文件

exe文件夹生成单个exe文件 https://blog.youkuaiyun.com/qq_42987283/article/details/111247353

四：注意事项

electron中开启node : https://blog.youkuaiyun.com/weixin_30252155/article/details/99818845
资源管理器打开某个目录链接

require('child_process').exec('start ' + __dirname + '\\music');