跨平台桌面应用 Electron 尝试（VS2019）

最新推荐文章于 2023-05-24 11:55:47 发布

iZaix

最新推荐文章于 2023-05-24 11:55:47 发布

阅读量4.2k

点赞数 9

分类专栏： electron 文章标签： js nodejs visual studio

本文链接：https://blog.csdn.net/u010796249/article/details/109802444

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VisualStudio下 Electron初次使用

Electron是什么
Electron部署
应用实践
后话

Electron是什么

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。如果你可以建一个网站，你就可以建一个桌面应用程序。
Electron 基于 Chromium 和 Node.js，在以前传统的做法中，想要降低多平台应用的开发成本，可能直接在服务器部署一套网站，然后利用其他封装的壳来充当应用，比如webview、Webkit、CefSharp等等，真正跨平台的仍是HTML，但是windows下的操作与交互并不能直接带到Mac或其他设备，Electron 出现给我们带来了新的思路与方法，同时HTML页面本地化的加载也为应用的美化带来了更多选择。

叨叨一下：简单的来说就是，终于不要搞那丑陋的WinForm了，什么DevExpress、ComponentOne啊，或者是WPF啊都不用想了，基于业务的表单操作，那不是web页就搞定了吗（套上官言，什么前后端分离啊、跨平台啊、领域驱动啊、快速迭代啊、部署迁移啥的），而且好看啊，看看微软前面还在VisualStudio2019史上最强IDE，后面VSCode也悄悄用的Electron，多长见识总是没坏处的。

Electron部署

在使用Electron之前，需要先安装好node,npm,electron，node.js的安装直接在官网下载就好，同时会帮我们安装好npm。
在这里插入图片描述
关于Electron的安装，最好是替换成国内镜像，直接使用npm我是没有成功，关于替换方法如下：

临时使用
npm --registry https://registry.npm.taobao.org install express
持久使用
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry 或 npm info express
通过cnpm使用（推荐）
npm install -g cnpm --registry=https://registry.npm.taobao.org

接着使用cnpm安装Electron

cnpm install -g electron

好了，安装完成之后检查一下
在这里插入图片描述

应用实践

下面，尝试创建一个Electron的应用（我用的VS2019）
在这里插入图片描述
第一步，在package.json文件中，添加项目引用
保存之后会提示缺失，但是之前已经安装过了，怎么会又提示安装呢？仔细观察，在VS中electron组件的引用路径是在项目目录下，而我们之前命令控制台安装的确是存在于C盘

C:\Users\iZaix\AppData\Roaming\npm\node_modules

两种方式处理：

将引用目录指向全局npm包目录
复制一份依赖包放在对应路径下（我使用的这个方式）

在这里插入图片描述
第二步，修改server.js文件，并新增想要展示的HTML页，可以参考官方示例 。我的这个引用的是GitHub上的文档
修改server.js

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

// 保持win对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let win

function createWindow () {
  //创建浏览器窗口
  win = new BrowserWindow({width: 800, height: 600})

  // 加载应用的 index.html
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // 打开开发者工具
  win.webContents.openDevTools()

  // 关闭window时触发下列事件.
  win.on('closed', () => {
    // 取消引用 window 对象，通常如果应用支持多窗口，则会将
    // 窗口存储在数组中,现在应该进行删除了.
    win = null
  })
}

// 当Electron完成初始化并准备创建浏览器窗口时调用此方法
// 部分 API 只能使用于 ready 事件触发后。
app.on('ready', createWindow)

// 所有窗口关闭时退出应用.
app.on('window-all-closed', () => {
  // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
  if (win === null) {
    createWindow()
  }
})

// 你可以在这个脚本中续写或者使用require引入独立的js文件.

创建index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>