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

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

C/S架构 - electron

  1. 主进程 渲染进程 可以实现不同页面的交互
  2. 系统托盘
  3. 应用程序打包(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.csdn.net/qq_42987283/article/details/111247353

四：注意事项

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

require('child_process').exec('start ' + __dirname + '\\music');
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

[鸿蒙三方库适配实战] 图像处理框架 G‘MIC CLI 的 OpenHarmony 平台迁移实践

avatar 开源鸿蒙跨平台开发者社区
cover

工程实战，应用导向：华清远见物联网“虚实融合“产教融合与实践教学方案

avatar 开源鸿蒙跨平台开发者社区
cover

瑞芯微RK3576迷你工控整机边缘计算盒子规格书参数配置性能说明，触觉智能IPC7609

avatar 开源鸿蒙跨平台开发者社区