文章目录

准备工作

  • 安装Node.js的LTS版本
  • 要检查 Node.js 是否正确安装，请在您的终端输入以下命令，查看安装版本：
node -v
npm -v

一、安装Electron

  • 在命令行模式下进入创建应用的文件夹，然后输入下面的安装命令。
npm install electron --save-dev
  • 命令执行完后，文件夹中包含如下内容。
    在这里插入图片描述

二、初始化npm项目

  • Electron 应用基于 npm 搭建，以 package.json 文件作为入口点。
npm init

  • 执行完如上命令后，package.json文件会被修改。可以全部按照默认选项设置，结束后再修改package.json内容。

  • 修改后package.json文件内容

//package.json
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",	//重点，用于打包软件
  "main": "main.js",		//重点，程序入口
  "scripts": {
  	"start": "electron .",	//重点，start命令用于开发模式下启动应用
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",		//重点，用于打包软件
  "license": "MIT",			
  "devDependencies": {
    "electron": "23.1.3"
  }
}

三、创建main.js

  • 创建main.js，并写入以下内容：
console.log('welcome Electron')

四、运行

  • 命令行运行如下命令
npm start
或
npm run start

运行结果如下：
在这里插入图片描述

到目前为止Electron应用就跑起来了，接下来，我们试一下显示页面。

五、添加index.html文件

  • 新建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文件

  • 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()
})
  • 项目目录
    在这里插入图片描述

七、运行

  • 命令行运行如下命令
npm start
或
npm run start

运行结果如下：
在这里插入图片描述

八、mian.js修改后，程序自动刷新

  • 修改package.json中的scripts代码,如下：
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --watch main.js --exec npm run build",
    "build": "electron ."
  },
  • npm start运行，这样每次修改main.js后，程序都自动重新编译。
  • 如果提示nodemon不是内部或外部命令，则nodemon没有安装，安装命令如下：
npm install nodemon –g

九、程序打包发布

  • 基于上面第七个步骤
  • package.json中的"author"和"description"不能为空
  • 将electron forge添加到应用的开发依赖中。
 npm install --save-dev @electron-forge/cli
  • 并使用import命令设置forge
 npx electron-forge import
  • 执行完上一个命令后，package.json会变成如下：
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron-forge start", //改变了
    "package": "electron-forge package", //改变了
    "make": "electron-forge make" //改变了
  },
  • 使用forge的make命令来创建打包的应用程序
 npm run make
  • electron-forge会创建out文件夹，打包的应用在out文件夹中
# electron # javascript # 前端
Logo
开源鸿蒙跨平台开发者社区

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

更多推荐

cover

【maaath】Flutter for OpenHarmony 短信管理应用实战

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

【Flutter for OpenHarmony】：Flutter前言及环境配置

（注：建议勾选“添加到PATH(需要重启)”；如果HarmonyOS toolchain报错的话，可以尝试在DevEco里面先建一个项目，这样ohpm就会自动下载了，node我是在node的官网上下载安装的。（注：如果安装过程中你勾选了更新PATH变量，需要重启电脑才可以生效）：直接编译为原生ARM代码，渲染使用自研Skia引擎，性能接近原生。：一套代码可运行在多个平台（移动、Web、桌面、嵌入式

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

鸿蒙 PC 底层开发技术详解（五）：应用沙箱环境和非应用沙箱环境的区别

本文分析了鸿蒙系统（HarmonyOS/OpenHarmony）的应用沙箱机制及其对终端操作的影响。系统通过类似Docker容器的沙箱隔离每个应用，HiShell终端运行在这种受限环境中，导致诸多限制：挂载点隔离、DAC机制差异、SELinux管控和seccomp过滤等，使得常规UNIX命令和调试工具无法正常工作。相比之下，通过hdc shell接入的调试终端虽能脱离沙箱限制，但仍受权限约束，仅在

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