文章目录
- 前言
- 使用Electron构建桌面应用程序
- 什么是Electron？
- 为什么选择Electron？
- 如何使用Electron实现上述想法？
- 1. 创建基本的Electron应用
- 2. 配置BrowserWindow
- 3. 定制化你的应用
- 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，同时禁用地址栏和其他导航控件。
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将你的应用打包成适合不同操作系统的安装包。
通过以上步骤，你就能够创建出一个符合要求的桌面应用程序了。这种方式不仅降低了开发门槛，还极大地提升了用户体验，因为它为用户提供了一个更加专注和安全的环境来访问所需的服务。
