文档章节

electron-创建一个hello world应用

罗布V
 罗布V
发布于 2017/08/11 14:30
字数 360
阅读 38
收藏 0

在进行该章内容之前,我们假设你已经正确的创建了一个package.json文件以及安装完成electron.现在 我们通过electron创建第一个桌面的应用。

创建一个新的文件main.js,并且写入下面的代码。

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

function createWindow() {
    win = new BrowserWindow({
        width: 800,
        height: 600
    })
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
    }))
}
app.on('ready', createWindow)

另外我们还需要创建一个index.html,并且在该文件里面写入下面的语句。

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <h1>Hello World</h1>
    We are using node
    <scrip>document.write(process.versions.node)</scrip>
    Chrome
    <script>
        document.write(process.versions.chrome)
    </script>
    and Electron
    <script>
        document.write(process.versions.electron)
    </script>

</body>

</html>

我们之后我们通过命令行输入如下的命令,却可运行应用。

$ electron ./main.js

它将会打开一个新的窗口,显示的内容如下图所示。

2017-08-11 14-23-03屏幕截图

上面的应用工作原理

在我们创建的main.js文件当中包含两个模块,app和BrowerWindow。app 模块主要控制你应用的生命周期。而BrowerWindow主要用创建和控制窗口对象。

我们定义了一个createWindow函数。我们创建了一个新的BrowerWindow对象,并且将URL附加到该对象当中。index.html主要是我们将要呈现给用户的界面。

© 著作权归作者所有

罗布V
粉丝 13
博文 60
码字总数 47114
作品 0
温州
程序员
私信 提问
mac 安装nodejs & electron 环境开发桌面应用

01下载node安装包 https://github.com/electron/electron Electron 是 Github 发布跨平台桌面应用开发工具,支持 Web 技术开发桌面应用开发,其本身是基于 C++ 开发的,GUI 核心来自于 Chro...

极客脑司机
2017/07/13
314
1
用Electron创建跨平台应用(第一弹)

用Electron创建跨平台应用连载目录: 用Electron创建跨平台应用(第一弹) 用Electron创建跨平台应用(第二弹)开启多窗口 用Electron创建跨平台应用(第三弹)开启系统通知 Electron是GitHub开发的...

木子昭
2018/08/27
0
0
JS是世界上最好的语言—— 使用Electron开发桌面应用(一)

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个专注于桌面应用的 Node. js 的变体,而不是 Web 服务器。 我的学习动机 前阵子用N...

李初五
05/12
0
0
开发一个React + Electron应用

最近用React + Electron开发了一个RSS阅读器,开源在:github.com/breeze2/bre…,这里记录一下大致的开发过程。 初始化 创建项目 以普通的React应用做基础,一步步初始化项目。预先安装yar...

breeze
03/10
0
0
[electron]终极奥义 五千字教程丢给你

前言 本文包含、、、、等相关知识点,内容较多,可能会引起不适,请酌情查看(手动滑稽)。 electron 简介 electron是由Github开发,是一个用Html、css、JavaScript来构建桌面应用程序的开源...

小心夹手
2018/09/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 女装大佬被拆穿是妹子假扮

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《All of the Stars》- Ed Sheeran 《All of the Stars》- Ed Sheeran 手机党少年们想听歌,请使劲儿戳(这里) @Leon_swool ...

小小编辑
17分钟前
45
3
3. 彤哥说netty系列之Java BIO NIO AIO进化史

你好,我是彤哥,本篇是netty系列的第三篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们介绍了IO的五种模型,实际上Java只支持其中的三种,即BIO/NIO/AIO。 本...

彤哥读源码
21分钟前
7
0
02.日志系统:一条SQL更新语句是如何执行的?

我们还是从一个表的一条更新语句说起,我们创建下面一张表: create table T(ID int primary key, c int); 如果要将ID=2这一行c的值加1,SQL可以这么写: update T set c=c+1 where ID=2; 前...

scgaopan
今天
9
0
【五分钟系列】掌握vscode调试技巧

调试前端js 准备一个前端项目 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1......

aoping
今天
8
0
PhotoShop 高级应用:USM锐化/S锐化/防抖

、 高反差锐化+混合模式:叠加模式 【将更多的边缘细节添加到图像中】

东方墨天
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部