中文代码示例之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 录制中出了不少岔子. 另外, 输入法确实是一 ...
随机推荐
- Day9:html和css
Day9:html和css <head> <meta charset="UTF-8"> <title></title> <me ...
- Ubuntu16.04下安装opencv3.4.2
1.安装官方给的opencv依赖包 GCC 4.4.x or later CMake 2.6 or higher Git GTK+2.x or higher, including headers (l ...
- MD5( 信息摘要算法)的概念原理及python代码的实现
简述: message-digest algorithm 5(信息-摘要算法).经常说的“MD5加密”,就是它→信息-摘要算法. md5,其实就是一种算法.可以将一个字符串,或文件,或压缩包,执行md ...
- Linux 下 pushd，popd，cd- 用法
一,为何要使用这几个命令? 可能大家会有疑问,为何要使用这几个命令, 难道用cd不就可以切换目录了吗? 没错,使用cd就可以切换到需要访问的目录, 但是有时会是一个路径很长,层次很多的目录 ...
- [原创]K8 Jboss jmx-console getshell exploit
[原创]K8 Jboss jmx-console getshell exploit https://www.cnblogs.com/k8gege/p/10645858.html 0x00 前言 今天内 ...
- @vue/cl构建得项目下，postcss.config.js配置，将px转化成rem
依赖包: postcss-pxtorem 配置: 在项目根目录下创建 postcss.config.js 配置如下: module.exports = () => ({ plugins: [ r ...
- [译].NET Framework 4.8发布
原文地址:https://devblogs.microsoft.com/dotnet/announcing-the-net-framework-4-8/ 我们很高兴地宣布今天发布.NET Framew ...
- java基础系列--volatile关键字
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7833881.html 1.volatile简述 据说,volatile是java语言中最轻 ...
- 仿照 ButterKnife 的 Android 注解实例
什么是注解 java.lang.annotation,接口 Annotation,在JDK5.0及以后版本引入. 注解处理器是 javac 的一个工具,它用来在编译时扫描和处理注解(Annotatio ...
- 翻译：update语句(已提交到MariaDB官方手册)
本文为mariadb官方手册:UPDATE的译文. 原文:https://mariadb.com/kb/en/update/ 我提交到MariaDB官方手册的译文:https://mariadb.co ...