中文代码示例之Electron桌面应用开发初体验
首先运行下面在目录下创建package.json:
$ npm init
去掉了一些无关项后内容如下:
{
"name": "hello",
"version": "1.0.0",
"description": "问好",
"main": "问好.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^4.0.8"
}
}
问好.js
const { app: 应用, BrowserWindow: 浏览器窗口 } = require('electron')
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let 窗口
function 创建窗口 () {
// 创建浏览器窗口。
窗口 = new 浏览器窗口({ width: 800, height: 600 })
窗口.loadFile('主页.html')
// 打开开发者工具
窗口.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
窗口.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
窗口 = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
应用.on('ready', 创建窗口)
// 当全部窗口关闭时退出。
应用.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
应用.quit()
}
})
应用.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (窗口 === null) {
创建窗口()
}
})
主页.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>吃了么?</title>
</head>
<body>
<h1>吃了么?</h1>
我们用了Node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
和Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
运行应用:
$ npm start
即显示开头的窗口(在Mac下测试)
有实质功能后还需发布为不同系统平台的包, 可参考: Application Distribution | Electron
中文代码示例之Electron桌面应用开发初体验的更多相关文章
- 中文代码示例之NW.js桌面应用开发初体验
先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...
- 中文代码示例之Angular入门教程尝试
原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入 ...
- 中文代码示例之Vuejs入门教程(一)
原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...
- 2018-12-09 疑似bug_中文代码示例之Programming in Scala笔记第九十章
续前文: 中文代码示例之Programming in Scala笔记第七八章 源文档库: program-in-chinese/Programming_in_Scala_study_notes_zh ...
- 2018-11-27 中文代码示例之Programming in Scala笔记第七八章
续前文: 中文代码示例之Programming in Scala学习笔记第二三章 中文代码示例之Programming in Scala笔记第四五六章. 同样仅节选有意思的例程部分作演示之用. 源文档 ...
- 2018-11-16 中文代码示例之Programming in Scala笔记第四五六章
续前文: 中文代码示例之Programming in Scala学习笔记第二三章. 同样仅节选有意思的例程部分作演示之用. 源文档仍在: program-in-chinese/Programming_ ...
- 2018-08-11 中文代码示例之Spring Boot 2.0.3问好
上次试用Spring Boot还是两年前: 中文代码示例之Spring Boot 1.3.3演示. 打算用在一个讨论组内小项目上, 于是从官网Building an Application with ...
- 2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构
知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...
- 2018-06-20 中文代码示例视频演示Python入门教程第四章 控制流
知乎原链 续前作: 中文代码示例视频演示Python入门教程第三章 简介Python 对应在线文档: 4. More Control Flow Tools 录制中出了不少岔子. 另外, 输入法确实是一 ...
随机推荐
- 第60节:Java中的JavaScript技术
欢迎到我的简书查看我的文集 前言: JavaScript是什么呢?它是一种基于对象和事件驱动的脚本语言,主要是应用于客户端上的.JavaScript它可以做到信息的动态交互,具有交互性,它不允许直接访 ...
- 第53节:Java当中的IO流(上)
Java当中的IO流 在Java中,字符串string可以用来操作文本数据内容,字符串缓冲区是什么呢?其实就是个容器,也是用来存储很多的数据类型的字符串,基本数据类型包装类的出现可以用来解决字符串和基 ...
- 为什么 array.foreach 不支持 async/await
一.背景 react 项目中,渲染组件时,显示的数据一直有问题,本来以为是 react 组件的问题,后来才发现罪魁祸首在 fetch 数据的过程,因为我用了 async/await ,而却搭配了 fo ...
- Anaconda / Conda 实践
一.环境 CentOS 7.6 有预装 python 2.7 二.Anaconda 与 Conda 区别 1.Anaconda Anaconda 是Python的一种发行版.包含了: (1)conda ...
- python 读取wav 音频文件的两种方式
python 中,常用的有两种可以读取wav音频格式的方法,如下所示: import scipy from scipy.io import wavfile import soundfile as sf ...
- ubuntu垃圾文件清理方法
linux和windows系统不同,linux不会产生无用垃圾文件,但是在升级缓存中,linux不会自动删除这些文件,今天就来说说这些垃圾文件清理方法. 1,非常有用的清理命令:sudo apt-ge ...
- Xamarin.Android 嵌入web端界面
在程序中嵌入Web端界面. 首先在前台界面上创建一个webview <android.webkit.WebView android:layout_width="match_parent ...
- Python实现随机漫步
随机漫步生成是无规则的,是系统自行选择的结果.根据设定的规则自定生成,上下左右的方位,每次所经过的方向路径. 首先,创建一个RandomWalk()类和fill_walk()函数 random_wal ...
- 关于 Kubernetes 中的 Volume 与 GlusterFS 分布式存储
容器中持久化的文件生命周期是短暂的,如果容器中程序崩溃宕机,kubelet 就会重新启动,容器中的文件将会丢失,所以对于有状态的应用容器中持久化存储是至关重要的一个环节:另外很多时候一个 Pod 中可 ...
- sql server 性能调优之 资源等待 CXPACKET
一.概述 CXPACKET是指:线程正在等待彼此完成并行处理.什么意思呢? 当sql server发现一条指令复杂时,会决定用多个线程并行来执行,由于某些并行线程已完成工作,在等待其它并行线程来同步 ...