原生 js html 开发成桌面应用 以及打包

前端打包成桌面应用

基于Electron 来做的桌面应用 这一篇文章先说说怎么处理桌面应用

---

---

目录结构

提示：官网地址如下：

官网地址
主要目录结构

	index.html               ---->    页面文件 你要展示的东西
	main.js                    ---->    入口文件 不指定为 main.js。默认为index.js
	packeage.json.       ----->   配置文件

---

一、添加配置文件

提示：如果下载包 很慢 就来这里： 点一下

• 先初始化 npm init
• 安装依赖包 npm install electron --save-dev 或者 yarn add electron --dev
• 新建 main.js 文件
• 新建 index.html 文件
• 在 index.html 中添加你自己想展现的东西

二、配置文件

1.配置 main.js 文件

代码如下（示例）：

const { app, BrowserWindow } = require('electron')
//  app 控制应用程序的事件生命周期
//  BrowserWindow 用于创建和管理应用程序

// createWindow()函数将你的网页加载到一个新的BrowserWindow实例中:
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
    // 宽度 高度
  })

  win.loadFile('index.html')
  // 展示文件
}

// 返回 Promise<void> - 当Electron 初始化完成。 可用作检查 app.isReady() 的方便选择，假如应用程序尚未就绪，则订阅ready事件。
app.whenReady().then(() => {
  createWindow()
})

2. 配置package.json 文件 添加脚本命令

代码如下（示例）：

只在 scripts 中添加了运行脚本命令: “start”: “electron .”

{
  "name": "test-electron",
  "version": "1.0.0",
  "description": "生成一个桌面应用",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "caomou",
  "license": "ISC",
  "devDependencies": {
    "electron": "^21.1.0"
  }
}

然后运行 运行刚添加的 脚本命令 (相信你们都会)

---

关闭应用

app 监听 window-all-closed 事件, window 系统 和 linux 系统关闭 应用但是并不适用 macOS 系统

app.on('window-all-closed', () => {
  // process.platform 属性 分别代表值
  // win32    window
  // linux    linux
  // darwin   macOS
  if (process.platform !== 'darwin') app.quit()
})

macOS 打开多个窗口

与前二者相比，即使没有打开任何窗口，macOS 应用通常也会继续运行。 在没有窗口可用时调用 app 会打开一个新窗口

为了实现这一特性，可以监听模组的 activate 事件，如果没有任何活动的 BrowserWindow，调用 createWindow() 方法新建一个。

因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 要实现这个，仅监听 whenReady() 回调即可。

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

  // 相比之下，即使没有打开任何窗口，macOS应用程序通常也会继续运行。激活应用程序时，没有可用的窗口应该打开一个新的。
  // 要实现这个特性，需要监听app模块的activate事件，如果没有打开BrowserWindows，则调用现有的createWindow()方法。
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

打开调试工具

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

  win.webContents.openDevTools(); //开启调试工具

  win.loadFile('index.html')
}

打包成桌面应用

yarn add --dev @electron-forge/cli
npx electron-forge import

第一步安装依赖,第二步转换脚本
你的脚本命令行就会变成这样

  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  //...

最后执行打包命令

yarn run make