浅谈Nodejs开发桌⾯应⽤针对Electron
electron.js 是 github 发布跨平台桌⾯应⽤开发⼯具，基于 web 技术。
基本假设
万事俱备，现在就把精⼒集中在学习 Electron 上，不要再担⼼界⾯的事情（将会构建的界⾯本质上就是普通的 Web 页⾯⽽已）。
Electron 概览
简⽽⾔之，Electron 提供了⼀个实时构建桌⾯应⽤的纯 JavaScript 环境。Electron 可以获取到你定义在 package.json 中 main ⽂件内容，然后执⾏它。通过这个⽂件（通常我们称之为 main.js），可以创建⼀个应⽤窗⼝，这个应⽤窗⼝包含⼀个渲染好的 web 界⾯，还可以和系统原⽣的 GUI 交互。
具体来说，就是当你启动了⼀个 Electron 应⽤，就有⼀个主进程（main process ）被创建了。这条进程将负责创建出应⽤的 GUI（也就是应⽤的窗⼝），并处理⽤户与这个 GUI 之间的交互。
举个例⼦，如果你只想做⼀个计算器，那你的 main process 只会做⼀件事情：实例化⼀个窗⼝，并内置了⼀个计算器的界⾯（这个界⾯是你⽤HTML、CSS 和 JavaScript 写的）。
虽然理论上只有 main process 才能和原⽣ GUI 产⽣交互，但其实我们可以通过⼀些⼿段让 renderer process 与原⽣ GUI 交互（在后⽂中你将学习到如何实现）。
Hello, world!
做好前期准备，现在让我们从 Hello World 开始吧！
使⽤的 repo
然后查看⼀下，你可以看看这个仓库中有哪些 tag：
git checkout
我们将跟随这些 tag 将声效器⼀步步构建出来：
git checkout 00-blank-repository
拉取（checkout）⽬标 tag 之后，执⾏：
npm install
这么做能保证项⽬所依赖的 Node 模块都会被拉取。
如果你⽆法切换到某⼀个 tag，最简单的解决⽅式就是重置仓库，然后再 checkout：
git add -A
git reset --hard
开⼯
先把 tag 为 ‘00-blank-repository’ 拉取下拉：
git checkout 00-blank-repository
在项⽬⽂件夹中创建⼀个 package.json ⽂件，并在⽂件中加⼊以下内容：
{
"name": "sound_machine",
"version": "0.1.0",
网页计算器html代码"main": "./main.js",
"scripts": {
"start": "electron ."
}
}
这个 package.json 的作⽤是：
确定应⽤的名字和版本号，
告诉 Electron main.js 是 main process 的⼊⼝，
定义启动⼝令 - 在 CLI （终端或者命令⾏）中执⾏ npm start 即可完成依赖安装。
现在快把 Electron 安装上吧。最简单的安装⽅式应该是通过 npm 安装预构建好的⼆进制⽂件，然后把它作为开发依赖（development dependency）写⼊ package.json 中（安装时带上 --save-dev 参数即可⾃动写⼊依赖）。在 CLI 中进⼊项⽬⽬录，执⾏下⾯的命令：
npm install --save-dev electron-prebuilt
预构建的⼆进制⽂件会根据操作系统不同⽽不同的，通过执⾏ npm start 安装。我们以开发依赖的⽅式使⽤它，是因为在项⽬构建中只有在开发阶段才会使⽤到 Electron。
以上，就是本次 Electron 教程所需要的全部东西了。
对世界说 Hi
创建⼀个 app ⽂件夹，在⽂件夹中新建 index.html ⽂件，并写⼊以下内容：
Hello, world!
在项⽬的根⽬录创建 main.js ⽂件。Electron 主线程的⼊⼝是这个 JS ⽂件，然后 “Hello world!” 页⾯也通过它显⽰出来：
'use strict';varapp=require('app');varBrowserWindow=require('browser-window');varmainWindow=('ready',function() {mainWindow=newBrowserWindow({height:600,width:800});mainWindow.loadUrl('file://'+__dirname+'/app/index.html');});
看起来并不难吧？
app 模块控制着应⽤的⽣命周期（⽐如，当应⽤进⼊准备状态（ready status）的时候要采取什么⾏动）。
BrowserWindow 模块控制窗⼝的创建。
mainWindow 对象就是你的应⽤窗⼝的主界⾯，当 JavaScript 垃圾回收机制被触发时窗⼝就会被关闭，此时该对象的值是null。
当 app 获取到 ready 事件后，我们通过 BrowserWindow 创建⼀个 800x600 窗⼝。
这个 window 的渲染器线程将会渲染 index.html ⽂件。
执⾏下⾯这⾏代码，看看我们的应⽤是什么样的：
npm start
现在沐浴在这个 app 的圣光中吧。
开发⼀个真正的应⽤
华丽丽的声效器
开始之前，我要问个问题：什么是声效器？
声效器是⼀个⼩设备，当你按下不同按键的时候，它会发出不同声⾳，⽐如卡通⾳或者效果⾳。在办公室⾥听到这样有趣的声⾳，好像整个⼈都明亮起来了呢。⽤这个例⼦作为探索如何使⽤ Electron 是个很棒的主意。
具体来说，我们将会实现以下功能，并涉及到以下知识：
声效器的基础（实例化浏览器窗⼝），
关闭声效器（主进程和渲染器进程之间的通信），
随时播放声⾳（全局快捷键），
创建⼀个快捷修饰键（修饰键，modifier keys， 指的是 Shift、Ctrl 和 Alt 键）设置页⾯（并将⽤户设置保存在主⽬录下），
添加⼀个托盘图标（创建原⽣ GUI 元素、了解菜单和托盘图标的使⽤）,
将应⽤打包到 Mac、Windows 和 Linux 平台。
实现声效器的基本功能
开始构建以及应⽤的结构
在开发过 “Hello World” 应⽤之后，现在可以着⼿制做我们的声效器了。
⼀个典型的声效器会有很多的按钮，你需要按下那些按钮才能让机器发声，通常会是拟声词（⽐如笑声、掌声、打碎玻璃的声⾳等等）。
响应点击 – 这是我们要做的第⼀件事情。
我们的应⽤结构⾮常简单直⽩。
在应⽤的根⽬录中，要有⼀个 package.json、main.js 和其他全局所需的应⽤⽂件。
app/ ⽬录中要包含 HTML ⽂件、CSS ⽬录、JS ⽬录、wav ⽬录还有图⽚⽬录。
出于简化这个教程的⽬的，所有和⽹页设计相关的⽂件都已经在⼀开始就放在仓库中了。请在命令⾏中输⼊git checkout 01-start-project 获取。现在，请你可以输⼊以下命令，重置你的仓库并拉取新的 tag：
If you followed along with the "Hello, world!" example:
git add -A
git reset --hard

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。