Electron通过为运行时提供丰富的本机(操作系统)API, 使你能够使用纯JavaScript创建桌面应用程序。你可以将其视为Node.js运行时的一种变体, 它专注于桌面应用程序而不是Web服务器。
这并不意味着Electron是绑定到图形用户界面(GUI)库的JavaScript。相反, Electron使用网页作为其GUI, 因此你也可以将其视为由JavaScript控制的最小Chromium浏览器。
你懂Javascript吗?你在等什么 ?通过本文, 你将学习如何在Windows中轻松实现Electron空白项目。
Electron免费应用程序:
- 原子
- Gitbooks
- Javascript知识
- Windows的NodeJS发行版(Nodejs命令提示符)
你可以在主页上下载Node.js最新发行版。
文章图片
下载后, 安装发行版并执行Node.js命令提示符(其外观与Windows命令promp cmd.exe相同)。在这里, 你将执行本文中提到的所有命令。
文章图片
你可以下载正式的准备好测试预构建版本的执行程序, 以跳过在node.js命令提示符下执行的此步骤:
# Locate yourself in a folder, where you want and Clone the repository
$ git clone https://github.com/atom/electron-quick-start
# Then go to step 3 !
如果你想建立自己的, 请继续阅读。
Electron允许你从Web资源创建混合应用程序, 以启动你需要的项目:
创建一个带有项目名称的文件夹, 然后随心所欲地调用它, 在此示例中, 我们的文件夹为ocwDemo, 其中包含3个文件:
- index.html(你的模板)
- main.js(在此处设置基本的本机配置)
- package.json(项目的所有依赖项)
<
!DOCTYPE html>
<
html>
<
head>
<
meta charset="UTF-8">
<
title>
Our Code World Rocks<
/title>
<
/head>
<
body>
<
h1>
Our Code World Electron Demo<
/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>
.
<
br>
<
img src="http://ourcodeworld.com/resources/img/ocw-empty.png"/>
<
/body>
<
/html>
main.js
如果你决定更改html文件的名称, 请记住在main.js和package.json文件中进行更改。
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindowfunction createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800, height: 600, frame: false
})// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`)// Open the DevTools.
mainWindow.webContents.openDevTools()// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})app.on('activate', function() {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
package.json
包json是关于你的项目的简短描述, 其中还包含你要添加的依赖项(节点包管理器), 当然, 我们的Electron版是预先构建的, 它将包含所需的Electron版, 请在此处详细了解发布。
{
"name": "ourcodeworldelectron",
"version": "1.0.0",
"description": "A quick description of your project",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"author": "Our Code World",
"license": "CC0-1.0",
"devDependencies": {
"electron-prebuilt": "^1.4.1"
}
}
创建我们的结构(或克隆演示仓库)后, 我们需要使用控制台进入项目所在的文件夹:
# Go into the repository (folder ourcodeworldelectron) using cd command$ cd ourcodeworldelectron# and then install dependencies using npm install
文章图片
依赖项将开始下载, 并且该项目几乎可以进行测试了。
而已 !你已经构造了一个基本的桌面应用程序。现在你只需要开始测试!在控制台中执行以下命令:
npm start
经过一段时间的建设… 你将得到类似的东西:
文章图片
多亏了Electron, 你可以在几分钟内使用Node.js创建一个混合应用程序。
【如何在Windows中使用Electron框架为桌面(html,css和javascript)创建混合应用程序】在这里阅读有关框架的所有内容非常重要。编写完应用程序后, 你可以按照应用程序分发指南创建分发, 然后执行打包的应用。玩得开心 !
推荐阅读
- WuMgr(一个开放源代码工具,用于管理Windows OS上的Microsoft产品更新)
- Android Log Viewer(一个日志查看器工具,可简化实时对Android日志的分析)
- 如何将相机与Electron Framework一起使用(创建快照)并将图像保存在系统上
- Electron框架的语音命令(语音识别)和语音合成
- 如何在Electron Framework中使用node.js(SSH2)创建sftp客户端
- 如何使用Electron框架获取操作系统和硬件信息
- 如何在Android中跟踪关键的应用参与度指标
- 如何在Android中使用Sweet Alert对话框
- 小布助手在面向中文短文本的实体链指比赛中的实践应用