基于electron快速将任意网站打包成跨平台的桌面端软件

简介: 基于electron快速将任意网站打包成跨平台的桌面端软件

image.png

hi, 大家好, 我是徐小夕.

之前有些用户和朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间使用electron开发了桌面端的软件Dooring-electron.

image.png

当然这篇文章不会介绍如何从零使用 electron , 而是会提供一种方案, 帮助大家快速的将线上网站转化为 electron 应用.

文章最后我也会分享一款我朋友开发的在线工具, 可以不写一行代码, 轻松把线上网站转化为桌面端软件.

electron的一些知识

熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构,这使得Electron在架构上非常类似于一个现代的网页浏览器。我们可以控制两种类型的进程:主进程和渲染器

每个 Electron 应用都有一个单一的主进程,作为应用程序入口。主进程在 Node 环境中运行,我们可以使用所有 Node 的能力。

那么主进程中我们可以做些什么呢? 主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口

BrowserWindow 类的每个实例创建一个应用程序窗口,且在单独的渲染器进程中加载一个网页。 我们可从主进程用 window 的 webContent 对象与网页内容进行交互。

有了以上基础, 我画了一张dooring-electron 的简单架构图方便大家理解:

image.png

想对electron有更多直观理解的, 也可以参考其官网:

www.electronjs.org/

实现将线上网站打包成桌面端软件

我们知道如果想要加载第三方网络资源, 可以使用 mainWindow.loadURL(url) 来实现, 所以只需要将网址放到 loadURL 方法中让 electron 打开即可:

const mainWindow = new BrowserWindow({
    maximizable: true,
    show: false,
    title: "H5-dooring网站制作平台",
    fullscreen: false,
    center: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      enableRemoteModule: true,
      nodeIntegration: true,
    },
  });
  mainWindow.maximize();
  mainWindow.setAutoHideMenuBar(true);
  mainWindow.loadURL('your website address');

同时如果想要控制网站打开新的页面时的窗口尺寸, 我们只需要对窗口进行监听, 来动态设置新窗口的尺寸即可:

mainWindow.webContents.setWindowOpenHandler((details) => {
    const base = {
      fullscreen: false,
      skipTaskbar: true,
      center: true,
      maximizable: true,
      autoHideMenuBar: false,//自动隐藏菜单栏
      // icon: iconPath,// 窗口图标
      parent: null ,//指定父窗口
      resizable: true,
      webPreferences: {//网页功能设置。
        webSecurity: false,//禁用同源策略
        nodeIntegration: true,
        nodeIntegrationInWorker: true,
        enableRemoteModule: true,
        contextIsolation: false
      },
    }
    const h5Win = {
      width: 1200,
      minWidth: 1200,
      minHeight: 775,
      height: 775,
      y: 60,
    }
    const otherWin = {
      width: 1200,
      minWidth: 1200,
      minHeight: 800,
      height: 800,
      y: 60,
    }
    if (details.url.indexOf('/preview') > -1) {
      return { 
        action: 'allow',//允许新窗口被创建
        overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
          ...base,
          ...h5Win,
        }
      }
    }
    if (details.url.indexOf('/ide') > -1) {
      return { 
        action: 'allow',//允许新窗口被创建
        overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
          ...base,
          ...otherWin,
        }
      }
    }
    if (details.url.indexOf('/h5_plus') > -1) {
      return { 
        action: 'allow',//允许新窗口被创建
        overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
          ...base,
          width: 1500,
          height: 860
        }
      }
    }
    return { 
      action: 'allow',//允许新窗口被创建
      overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
        ...base,
        ...otherWin, 
      }
    }
  })

对于网站打包的配置 electron 文档上介绍的很详细, 这里我就不一一介绍了, 大家可以在 github 上参考学习:

不用写一行代码, 轻松将你的网站打包成桌面端软件

image.png

在线地址:webdesk.pigjs.com/builder

我亲自体验了一下, 使用起来还是相当方便的, 不需要写一行代码就可以将网站转化的桌面端软件, 以下是一些功能优缺点介绍.

image.png

Webdesk 功能及特点:

  1. 快速转换:WebDesk可以在几分钟内将网页转换为桌面应用,无需编码或复杂的设置
  2. 多平台支持:可以将网页转化成 Window 桌面应用、macOs桌面应用。
  3. 广泛的应用场景:无论是保存在线课程、工作文档还是个人网站,WebDesk都是将其转换为桌面应用的理想选择。

Webdesk 缺点:

  1. 无代码签名:安装时可能因未签名而被系统提示存在安全隐患。
  2. 体积过大:安装包体积约为 80MB,相对较大
  3. 内存占用高:运行时内存占用较高
  4. 无法离线使用:需要网络连接才能使用,不支持离线模式

Webdesk 未来规划:

  1. 代码签名:增加自动或自定义代码签名功能,提高安装安全性。
  2. 应用平台上架:实现从构建到平台分发的完整流程
  3. 体积减小:优化安装包,减小体积,降低内存占用
  4. 离线使用:增加离线使用功能,无需网络即可使用
  5. 多语言支持:增加多语言支持

更多 前端 / 低代码 / 可视化 相关的技术分享和实现, 欢迎 微信 搜索 趣谈前端 学习探索.

目录
相关文章
|
30天前
|
资源调度 运维 JavaScript
使用electron创建桌面应用及常见打包错误解决
使用electron创建桌面应用及常见打包错误解决
198 3
|
2月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
123 3
|
17天前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
29天前
|
前端开发 Unix Linux
揭秘 Electron 的 Linux 打包过程:你知道背后发生了什么吗?
本文详细介绍了 `electron-builder` 在 Linux 平台上如何打包 Electron 应用程序,涵盖了 AppImage、Flatpak、Snap 等多种格式的打包原理和具体实现。文章从初始化 `LinuxPackager` 到创建各种目标格式的包,详细解析了每个步骤的代码逻辑和关键方法,帮助开发者更好地理解和使用 `electron-builder` 进行 Linux 应用的打包。
70 2
揭秘 Electron 的 Linux 打包过程:你知道背后发生了什么吗?
|
5月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
92 2
|
1月前
|
安全 前端开发 iOS开发
揭秘 electron-builder:macOS 应用打包背后到底发生了什么?
本文详细介绍了 Electron 应用在 macOS 平台上的打包流程,涵盖配置文件、打包步骤、签名及 notarization 等关键环节。通过剖析 `electron-builder` 的源码,展示了如何处理多架构应用、执行签名,并解决常见问题。适合希望深入了解 macOS 打包细节的开发者。
41 2
|
29天前
|
开发框架 JavaScript 前端开发
Electron技术深度解析:构建跨平台桌面应用的利器
【10月更文挑战第13天】Electron技术深度解析:构建跨平台桌面应用的利器
145 0
|
29天前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
103 0
|
3月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
140 0
|
3月前
|
前端开发 JavaScript API
强强联手打造桌面应用新标杆:Angular与Electron的完美融合——从环境搭建到通信机制,全面解析构建跨平台应用的最佳实践与技巧
【8月更文挑战第31天】随着Web技术的进步,开发者们越来越多地采用Web技术来构建桌面应用程序。通过结合使用开源框架Electron及前沿的前端框架Angular,开发者能充分利用JavaScript、HTML和CSS打造出高性能且易维护的跨平台桌面应用。本文将详细介绍如何搭建基于Angular与Electron的开发环境,包括创建Angular项目、安装Electron及相关依赖、配置Electron主进程以及实现Angular应用与Electron间的通信等关键步骤,并最终将应用打包成多平台可执行文件,为读者提供了一套完整的解决方案以快速入门并实践这一强大技术组合。
90 0