• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

跨平台桌面应用 Electron 尝试(VS2019)

互联网 diligentman 4天前 5次浏览

VisualStudio下 Electron初次使用

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

Electron是什么

跨平台桌面应用 Electron 尝试(VS2019)
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 尝试(VS2019)
关于Electron的安装,最好是替换成国内镜像,直接使用npm我是没有成功,关于替换方法如下:

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

接着使用cnpm安装Electron

cnpm install -g electron

好了,安装完成之后检查一下
跨平台桌面应用 Electron 尝试(VS2019)


应用实践

下面,尝试创建一个Electron的应用(我用的VS2019)
跨平台桌面应用 Electron 尝试(VS2019)
第一步,在package.json文件中,添加项目引用跨平台桌面应用 Electron 尝试(VS2019)
保存之后会提示缺失,但是之前已经安装过了,怎么会又提示安装呢?仔细观察,在VS中electron组件的引用路径是在项目目录下,而我们之前命令控制台安装的确是存在于C盘

C:UsersiZaixAppDataRoamingnpmnode_modules

两种方式处理:

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

跨平台桌面应用 Electron 尝试(VS2019)
第二步,修改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>

第三步,配置项目属性,将Node.exe路径指向项目路径下的electron.exe

跨平台桌面应用 Electron 尝试(VS2019)

跨平台桌面应用 Electron 尝试(VS2019)
运行项目,创建一个简单的electron应用就完成了。
跨平台桌面应用 Electron 尝试(VS2019)


后话

这只是简单的创建一个Electron项目,想要更深入的应用还需要不断的学习和积累,它的本意是利用前端技术的优势来创建跨平台的桌面应用,可能我们更多的只是将它当作一个浏览器的壳来使用,但是我仍希望能有更多人真正的用起来,减少开发量也好,美化页面也好,应用科学需要不停的实践才能走得更好。


喜欢 (0)