介绍electron框架

最新推荐文章于 2024-07-22 08:23:27 发布

ningto.com

最新推荐文章于 2024-07-22 08:23:27 发布

阅读量7.6k

点赞数 2

分类专栏： node.js

本文为博主原创文章，转载请注明来源(泞途 - 泊客网 https://ningto.com)。

本文链接：https://blog.csdn.net/tujiaw/article/details/51582744

版权

node.js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

这是一个整合了Node，Chromium，V8的一个框架，通过它可以使用JavaScript，HTML, CSS技术来开发桌面应用程序

混合开发

随着前端技术的发展，现在越来越多的桌面应用程序会嵌入一些Web技术来进行混合开发，好处当然是结合了web端和传统桌面软件各自的优点。常见的有使用开源的Chromium，Qt的QWebView以及最新的QWebEngineView。

Electron

通过electron框架可以使用JavaScript，HTML，CSS来开发跨平台的桌面应用程序

国外资源很难下载到，可以到这里来下载electron-v1.2.0-win32-x64 ，直接运行electron.exe就可以看到效果了，上面也介绍了怎么来运行自己的应用程序

Hello，world

在electron.exe目录下创建demo/hello目录
使用命令行工具cd到hello目录

npm init，使用默认的一路按Enter就可以，完成之后在当前目录下就生成了package.json文件，内容如下：

{
"name": "hello",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}

在当前目录下新建main.js文件，内容如下：

const electron = require('electron')
// 控制应用程序的整个生命周期
const app = electron.app
// 创建一个浏览器窗口
const BrowserWindow = electron.BrowserWindow
// 声明一个全局浏览器窗口对象，如果你不这样做，在JavaScript对象被垃圾回收的时候窗口会被自动关闭
let win = null

// 当electron完成初始化后这个事件回调会被调用，很多APIs必须在这之后才能使用，
// 这这里创建浏览器窗口是个合适的时机
app.on('ready', () => {
  win = new BrowserWindow({width: 700, height: 600})
  // 载入网页
  win.loadURL(`file://${__dirname}/index.html`)
  // 打开网页调试工具
  // win.webContents.openDevTools()
  // 当窗口关闭的时候回被触发
  win.on('closed', () => {
    // 解除对窗口对象的引用
    win = null
  })
})

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

在当前目录下新建index.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

回到electron目录下执行:electron ./demo/hello, 如下图：

ningto.com

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录