打造你的第一个 Electron 应用
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端。
这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本。 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。
注意: 获取该示例的代码仓库: 立即下载并运行。
从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同,应用的入口是 package.json
文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构:
your-app/
├── package.json
├── main.js
└── index.html
为你的新Electron应用创建一个新的空文件夹。 打开你的命令行工具,然后从该文件夹运行npm init
npm init
npm 会帮助你创建一个基本的 package.json
文件。 其中的 main
字段所表示的脚本为应用的启动脚本,它将会在主进程中执行。 如下片段是一个 package.json
的示例:
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js"
}
注意:如果 main
字段没有在 package.json
中出现,那么 Electron 将会尝试加载 index.js
文件(就像 Node.js 自身那样)。 如果你实际开发的是一个简单的 Node 应用,那么你需要添加一个 start
脚本来指引 node
去执行当前的 package:
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "node ."
}
}
把这个 Node 应用转换成一个 Electron 应用也是非常简单的,我们只不过是把 node
运行时替换成了 electron
运行时。
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
安装 Electron
现在,您需要安装electron
。 我们推荐的安装方法是把它作为您 app 中的开发依赖项,这使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夹中运行下面的命令:
npm install --save-dev electron
开发一个简易的 Electron
Electron apps 使用JavaScript开发,其工作原理和方法与Node.js 开发相同。 electron
模块包含了Electron提供的所有API和功能,引入方法和普通Node.js模块一样:
const electron = require('electron')
electron
模块所提供的功能都是通过命名空间暴露出来的。 比如说: electron.app
负责管理Electron 应用程序的生命周期, electron.BrowserWindow
类负责创建窗口。 下面是一个简单的main.js
文件,它将在应用程序准备就绪后打开一个窗口:
const { app, BrowserWindow } = require('electron') function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: ,
height: ,
webPreferences: {
nodeIntegration: true
}
}) // 加载index.html文件
win.loadFile('index.html')
} app.whenReady().then(createWindow)
您应当在 main.js
中创建窗口,并处理程序中可能遇到的所有系统事件。 下面我们将完善上述例子,添加以下功能:打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口,添加后,main. js 就像下面这样:
const { app, BrowserWindow } = require('electron') function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: ,
height: ,
webPreferences: {
nodeIntegration: true
}
}) // 并且为你的应用加载index.html
win.loadFile('index.html') // 打开开发者工具
win.webContents.openDevTools()
} // This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow) // Quit when all windows are closed.
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
}) app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === ) {
createWindow()
}
}) // In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件,然后用 require 导入。
最后,创建你想展示的 index.html(或者使用自己的项目npm run build打包后的index.html)
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
启动你的应用
在创建并初始化完成 main.js
、 index.html
和package.json
之后,您就可以在当前工程的根目录执行 npm start
命令来启动刚刚编写好的Electron程序了。
转自:https://www.electronjs.org/docs/tutorial/first-app
打造你的第一个 Electron 应用的更多相关文章
- Microsoft Azure Web Sites应用与实践【1】—— 打造你的第一个Microsoft Azure Website
Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...
- 第一个electron
1 开发环境:node环境 2 下载electron:npm install electron --save-dev 3 package.json配置如下: { "name": & ...
- 一个Electron的设计缺陷及应对方案
当你想实现阻止Electron窗口关闭,并弹出询问对话框,提示用户:"文章尚未保存,是否要关闭窗口"这类业务时,那么你99%会碰到这个BUG: https://github.com ...
- 自己实现一个Electron跨进程消息组件
我们知道开发Electron应用,难免要涉及到跨进程通信,以前Electron内置了remote模块,极大的简化了跨进程通信的开发工作,但这也带来了很多问题,具体的细节请参与我之前写的文章: http ...
- 中文代码示例之Electron桌面应用开发初体验
参考: 打造你的第一个 Electron 应用 首先运行下面在目录下创建package.json: $ npm init 去掉了一些无关项后内容如下: { "name": &quo ...
- 使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock
使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock 在上一篇<electron快速开始>里讲述了如何快速的开始一个electron的应用程序,既然electr ...
- Electron 入门第一篇
官网:http://electronjs.org/docs/tutorial/application-architecture 转载:https://blog.csdn.net/qq_33323731 ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- electron打包发布
1.全局安装electron npm install electron -g 在cmd 直接输入 electron 直接启electron 2.编写第一个Electron应用 在任何地方,建立一个ap ...
随机推荐
- K3CLOUD呼吸时间设置
- Hadoop_在linux中安装hadopp出现的问题
问题 sudo: no valid sudoers sources found, quitting 网络解决方法 链接:sudo: no valid sudoers sources found, qu ...
- python库之-------Pandas
包括两个数据结构:DataFrame和Series 官方文档地址: pandas https://pandas.pydata.org/pandas-docs/stable/index.html ser ...
- 图表|Line graphs|Bar graphs|Pie graphs|Scatter graphs|标目|标值|图解|图题|标值|
科研论文写作-图表 图像的特点是直观性高效,可用于描述非线性关系,将文字难以描述的内容表达出来. Line graphs中有自变量和因变量,用于表示变化趋势.为了清晰简洁和易于辨认,所以其中的线条最好 ...
- django框架中的cookie与session
cookie因为http是一个无状态协议,无法记录用户上一步的操作,所以需要状态保持.cookie和session的区别:1.cookie是保存在浏览器本地的,所以相对不安全.cookie是4k的大小 ...
- postman接口测试使用
在做测试之前,先要了解一下http相关的一些知识,这样做起来才会更加顺手. http的请求分为header 和 body,一般在header里面放一些其他的信息,比如cookie,浏览器信息 body ...
- 浮动框架iframe
浮动框架式一种比较特别的框架,和frame比较类似.不过frame必须在frameset中才可以,而iframe不一样,首先, 他是一种内联框架,其次,他可以放在网页中的任何位置. 所以,iframe ...
- 听《Sara》
Sara这首歌太好听了,虽然没有清楚具体是唱什么,但我感觉是讲一个故事,很好奇,我找到了歌词. Sara 塞拉 鲍勃迪伦 I laid on a dune, I looked at the sky, ...
- ES6下的Function.bind方法
在JavaScript的使用中,this的指向问题始终是一个难点.不同的调用方式,会使this指向不同的对象.而使用call,apply,bind等方式,可改变this的指向,完成一些令人惊叹的黑魔法 ...
- 喜欢B站的用户为何认同感超强?
前几天视频弹幕网站哔哩哔哩(以下简称"B站"),正式登陆纳斯达克,股票代码"BILI".当日其CEOC兼董事长陈睿在B站的账号上传了上市视频. 打开视频,满眼& ...