前端技术在最近几年迅猛发展, 在任何开发领域我们都能看到前端的身影, 从 PC 端到手机端, 从 App 到小程序, 似乎前端已经无所不能, 这就要求我们需要不断地去学习来提升自己! 前段时间尤大通过直播介绍了一下 vue3.0 开发的心路历程并放话今年发布, Deno v1.0 的发布, 扬言要干掉 Node, 摸了摸日渐稀疏的头发, 表示真心学不动了, 但摸了摸干瘪但口袋表示扶我起来我还能学!
接下来我们要说到但是一个可以开发桌面级应用的框架 Electron.
先简单介绍一下 Electron, 它是由 GitHub 团队开发, 目前在 GitHub 上 star 已经超过了 83k, 还是非常受欢迎的.
官方网站: https://www.electronjs.org/
GitHub 地址: https://github.com/electron/electron
那 Electron 到底是个什么东西呢? 官方网站首页用一句话为我们进行了概括:
使用 JavaScript,html 和 CSS 构建跨平台的桌面应用程序
从上面这句话我们可以看出, 作为前端开发者, 我们也可以根据基本的 web 开发语言来开发桌面级的应用, 听起来还是很诱人的, 但是还会诱人担心开发的软件会不会存在一些与原生语言开发的有差距呢? 这点不必担心, 很多大公司也都在用 Electron 进行开发并有许多非常成功的案例, 如我们程序员用到的 VSCode,Atom 等就是基于 Electron 开发的.
接下来我们来看一张图来进一步搞清楚 Electron:
从上图可以看出 Electron 基于了谷歌的内核 Chromium, 为我们提供了强大的 UI 支持, 使我们不用再考虑各浏览器的兼容性问题. Node.JS 为我们提供了强大的后端服务支撑, 可以非常方便的集成管理 NPM 包, Native API 为我们提供了多平台的统一 API, 可以在 Windows,Mac 和 Linux 等不同平台上进行运行.
接下来我们就通过 Electron 来从最基本的 hello world 开始进行开发.
首先我们需要安装 Node.JS, 安装方式还是很简单的, 在官网上找到下载地址一路确认即可安装成功.
官网地址: https://nodejs.org/zh-cn/
安装成功后我们在电脑的命令行工具中输入 node -v ,NPM -v, 如果这两个命令都返回相应的版本信息说明我们已经安装成功来, 我们最好安装 node v7 以上的版本.
Electron 官方网站其实已经为我们初学者提供了一个简单的应用 , 但是本着开发者的精神我们还是要一步一步地将代码进行敲打才能融入到脑子里, 接下来本人写的代码可能跟官方的有些出入, 但大体上是一致的.
首先我们在本地创建一个文件夹 electron-demo, 然后进入该目录通过命令行的方式输入 NPM init , 这样我们就初始化了一个 node 开发环境, 并在文件夹下会生成一个 package.JSON 的文件, 如下:
然后我们通过命令行的方式引入 electron 包 NPM install electron --save , 基于网络原因可能下载会慢一些, 我们可以通过淘宝镜像的 cnpm 进行下载.
安装完成后我们在 electron 文件夹下创建 index.HTML 和 index.JS 文件, 最后目录结构如下:
我们在 index.HTML 内写入了一个最基本的 hello world, 就像我们平时写 HTML 文件一样, 接下来就是重点的 index.JS 文件了.
- const {App, BrowserWindow} = require('electron');
- function createWindow() {
- // 创建浏览器窗口
- let win = new BrowserWindow({
- width: 800, // 宽
- height: 600, // 高
- webPreferences: { // 启用 node 可以在渲染进程中使用
- nodeIntegration: true
- }
- });
- // 并且为你的应用加载 index.HTML
- win.loadFile('index.html');
- // 打开开发者工具
- win.webContents.openDevTools();
- // 将 win 置为 null, 防止占用内存
- win.on('closed', () => {
- win = null;
- });
- }
- App.on('ready', () => {
- createWindow();
- });
在上面的代码中, 我都加了注释, 代码看起来其实并不复杂, 就是引入 electron, 然后根据 electron 提供的方法打开一个 800*600 的窗口.
接下来我们看一下官方为我们提供的 JS 写法:
- const {App, BrowserWindow} = require('electron')
- function createWindow() {
- // 创建浏览器窗口
- const win = new BrowserWindow({
- width: 800,
- height: 600,
- webPreferences: {
- nodeIntegration: true
- }
- })
- // 并且为你的应用加载 index.HTML
- win.loadFile('index.html')
- // 打开开发者工具
- win.webContents.openDevTools()
- }
- // Electron 会在初始化完成并且准备好创建浏览器窗口时调用这个方法
- // 部分 API 在 ready 事件触发后才能使用.
- App.whenReady().then(createWindow)
- // 当所有窗口都被关闭后退出
- App.on('window-all-closed', () => {
- // 在 macOS 上, 除非用户用 Cmd + Q 确定地退出,
- // 否则绝大部分应用及其菜单栏会保持激活.
- if (process.platform !== 'darwin') {
- App.quit()
- }
- })
- App.on('activate', () => {
- // 在 macOS 上, 当单击 dock 图标并且没有其他窗口打开时,
- // 通常在应用程序中重新创建一个窗口.
- if (BrowserWindow.getAllWindows().length === 0) {
- createWindow()
- }
- })
- // 您可以把应用程序其他的流程写在在此文件中
- // 代码 也可以拆分成几个文件, 然后用 require 导入.
从上面官方提供的写法可以看出在 App 启动和关闭时做了相应的操作, 这些后续我们会逐步用到.
待 index.JS 完成后我们再对 package.JSON 进行如下修改:
- {
- "name": "electron-demo",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "start": "electron ."
- },
- "author": "",
- "license": "ISC",
- "dependencies": {},
- "devDependencies": {
- "electron": "^9.0.5"
- }
- }
在 scripts 中增加了一个 start 的启动方式, 接下来我们就可以通过 NPM run start 来启动我们的 demo 项目来, 最终的运行结果如下:
最后我们再来看一下整个项目的运行过程, 当我们运行 NPM run start 时其实是运行了 package.JSON 中 scripts 中的 electron . 的命令, 然后 hi 通过 package.JSON 中的 main 字段找到 index.JS, 这个 index.JS 我们可以随便命名, 一般命名为 main.JS, 本人只是在 NPM init 的时候就用了默认的 index.JS, 当找到 index.JS 后执行里面的代码, 就是我们上面所说的执行 electron 创建一个窗口, 通过 loadFile() 方法执行 index.HTML 文件, 生成来一个我们想要的窗口应用.
我们可以理解为 package.JSON 中定义的入口文件 main 就是主进程, 一般一个程序只有一个主进程, 一个或多个线程, 我们可以利用这一个主进程打开多个线程, 即打开了多个类似于 index.HTML 的窗口.
来源: https://www.cnblogs.com/weijiutao/p/13195306.html