RPA编程实践：Electron简介

文章目录

前言
使用Electron构建桌面应用程序
- 什么是Electron？
- 为什么选择Electron？
- 如何使用Electron实现上述想法？
- - [1. 创建基本的Electron应用](#1. 创建基本的Electron应用)
  - [2. 配置BrowserWindow](#2. 配置BrowserWindow)
  - [3. 定制化你的应用](#3. 定制化你的应用)
  - [4. 打包与分发](#4. 打包与分发)

前言

Electron，用官网的话说，叫做使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序。

说白了，就是用户想要的是一个软件（通常是xxx.exe，双击可以安装或者直接运行。就跟QQ差不多）

但你呢，却只会web开发

所以呢，你就想了一个主意，你下载了一个开源的浏览器的代码。此时，你还有你研制的web APP。

你只需要给开源的浏览器套个壳，魔改一番：

这个浏览器别的网站我都不服务，就你想要的那个功能对应的网站，我才支持，

就是说这个所谓的浏览器只能看一个网页（或网站），而且这些内容一多半都是本地的，内置的。同时，这浏览器没有地址栏，也没办法修改当前打开的页面。

用户想使用的时候，

使用Electron构建桌面应用程序

什么是Electron？

Electron是一个由GitHub开发的开源框架，它允许开发者使用HTML、CSS和JavaScript来构建跨平台的桌面应用程序。通过结合Chromium渲染引擎和Node.js运行时环境，Electron使得创建功能丰富的桌面应用变得简单快捷，而无需离开Web技术栈。

为什么选择Electron？

对于那些已经熟悉Web开发技术（如HTML、CSS和JavaScript）的人来说，Electron提供了一个绝佳的机会，让他们可以利用现有的技能集来开发桌面应用程序。这意味着你可以：

减少学习成本：不需要学习新的编程语言或框架。
提高开发效率：使用熟悉的工具和技术快速迭代产品。
跨平台兼容性：一次编写，即可在Windows、macOS和Linux上运行。

如何使用Electron实现上述想法？

根据你所描述的需求，你的目标是创建一个只能访问特定网站或网页的应用程序，并且这个应用没有地址栏，用户也不能随意更改当前打开的页面。这实际上就是将你的Web应用"封装"进一个定制化的浏览器窗口中。下面是一些关键步骤：

1. 创建基本的Electron应用

首先，你需要安装Node.js，然后通过npm安装Electron。接着，创建一个简单的项目结构，包括主进程文件(main.js)和渲染进程文件(index.html)。

2. 配置BrowserWindow

在Electron中，BrowserWindow模块用于创建和控制浏览器窗口。你需要配置这个窗口，使其加载本地的HTML文件或者指定的远程URL，同时禁用地址栏和其他导航控件。

javascript 复制代码

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载本地html文件或指定的网址
  win.loadFile('index.html') // 或者使用win.loadURL('http://yourwebsite.com')
  
  // 禁用菜单栏
  win.setMenu(null);
}

app.whenReady().then(createWindow)

3. 定制化你的应用

为了确保应用只能访问特定的内容，你可以通过监听窗口的各种事件（如will-navigate）来阻止任何尝试跳转到其他页面的行为。此外，还可以进一步自定义外观，比如移除默认的边框、添加自定义按钮等。

4. 打包与分发

最后，当你完成了开发和测试后，可以使用工具如electron-builder或electron-packager将你的应用打包成适合不同操作系统的安装包。

通过以上步骤，你就能够创建出一个符合要求的桌面应用程序了。这种方式不仅降低了开发门槛，还极大地提升了用户体验，因为它为用户提供了一个更加专注和安全的环境来访问所需的服务。