用Electron将web网页程序包装成桌面应用

孤影_ls

已于 2023-04-13 17:36:40 修改

阅读量5.4k

点赞数 6

分类专栏：前端沉淀文章标签：前端 electron javascript web

于 2021-12-13 16:15:20 首次发布

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/121902085

版权

前端沉淀专栏收录该内容

17 篇文章 0 订阅

订阅专栏

用Electron将web网页程序包装成桌面应用

前提

web 端页面，真的太容易一不小心关掉了，或者,标签页比较多的时候不太容易找到,所以决定快速包装一个

认识electron

electron快速入门

搭建electron项目

第一步创建项目,下载依赖

mkdir my-electron-app && cd my-electron-app
npm init
npm install --save-dev electron (devDependencies:只在开发环境中使用的依赖，最后不会被打包到项目中)

init初始化命令会提示您在项目初始化配置中设置一些值

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

编写文件

需要我们编写两个文件
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

main.js

// 在文件头部引入 Node.js 中的 path 模块
const path = require('path')
// app 它控制应用程序的事件生命周期。
// BrowserWindow 模块，它创建和管理应用程序 窗口。
const { app, BrowserWindow } = require('electron');

// 创建浏览器窗口
function createWindow () {
    //__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)
    const mainWindow = new BrowserWindow({
        width: 1000,
        height: 800,
      })
      // 本地文件
      //mainWindow.loadFile('index.html')
      // 线上页面
      mainWindow.loadURL('https://www.baidu.com/')
      // 打开控制台
      mainWindow.webContents.openDevTools()

};

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') app.quit()
})

// 部分 API 在 ready 事件触发后才能使用。
// 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
app.whenReady().then(() => {
    createWindow()
    app.on('activate', function () {
      // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他打开的窗口，那么程序会重新创建一个窗口。
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

打包

采用electron-builder打包
- electron-builder
- npm install --save-dev electron-builder
配置打包信息(package.json)

  "build": {
    "appId": "com.baidu.app",//包名  
    "productName": "baidu",//项目名 这也是生成的exe文件的前缀名
    "dmg": {
      "icon": "public/icon/icons.icns"
    },
    "win": {
      "icon": "public/icon/icons.ico"
    }
  },

图标icon,mac要求是icns,win要求是ico
- ico生成网址
- 文件转换器,png转icon

效果图

浏览器
桌面应用

孤影_ls

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
7
评论
用Electron将web网页程序包装成桌面应用

用Electron将web网页程序包装成桌面应用前提web 端页面，真的太容易一不小心关掉了，或者,标签页比较多的时候不太容易找到,所以决定快速包装一个认识electronelectron快速入门搭建electron项目第一步创建项目,下载依赖mkdir my-electron-app && cd my-electron-appnpm initnpm install --save-dev electron (devDependencies:只在开发环境中使用
复制链接

扫一扫

专栏目录