中文代码示例之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 录制中出了不少岔子. 另外, 输入法确实是一 ...
随机推荐
- Spring boot 内置tomcat禁止不安全HTTP方法
Spring boot 内置tomcat禁止不安全HTTP方法 在tomcat的web.xml中可以配置如下内容,让tomcat禁止不安全的HTTP方法 <security-constraint ...
- js连等赋值的陷阱
先来看一段代码: (function(){ var x = y = 1; })(); console.log(y); console.log(x); 最开始我觉得这道题简直是送分题啊,很明显结果为,y ...
- [Swift]SwiftyJSON的使用：解析JSON
用法 初始化Initialization import SwiftyJSON let json = JSON(data: dataFromNetworking) 或者 let json = JSON( ...
- itext实现pdf自动定位合同签订
需求 需要实现如下效果(最终效果) 思考 需求方的要求就是实现签订合同,实现方法不限,但过程中又提出需要在签章的过程中把签订日期的文字也打上去,这就有点坑了~ 一开始的想法是想办法定位需要签名的位置, ...
- FileZilla 使用笔记
FileZilla 使用了三年了,一些功能其实还没有主动去发现,这次接着项目忙完的空闲时间整理一下 Tips,提高工作效率,方便以后查阅. 一.好用的功能 1.Site Manager - 站点管理器 ...
- 简单的ld链接脚本学习
一. 链接脚本的整体认识 什么是链接文件呢?作用是什么呢? 当编写了多个C文件时,我们将他们编译链接成一个可执行的文件,此时就需要用到链接脚本文件(ld).ld脚本主要功能就是:将多个目标文件(.o) ...
- 开发中常用js记录（三）
(1)Jquery 判断一个元素下是否有指定的class$('div').is('.classname')$('div').hasClass('redColor') (2)获得窗口长宽等$(windo ...
- C# 算法之选择排序
1.简介 选择排序是排序中比较简单的一种,实现的大致思路如下:首先我们拿到一个需要排序的数组,假设该数组的第一个元素是最小的,然后将数组中剩下的元素,于最小的元素进行比较,如果中间有比第一个元素的小的 ...
- 使用 Infer.NET 进行概率编程
本文介绍了如何使用 Infer.NET 进行概率性编程. 概率性编程是一种将自定义模型表示为计算机程序的机器学习方法. 借助它可以在模型中包含专业知识,使机器学习系统更易理解. 它还支持在线推断,即在 ...
- MongoDB加auth权限
目录 裸奔有多危险 mongoDB修改默认端口号 关闭MongoDB 重启MongoDB 设置密码 吹个牛B,自己的MongoDB裸奔了快半年,从未遭受黑客攻击.也不知道是自己运气好,还是黑客对我的乞 ...