使用 Electron 构建桌面应用.pdfVIP

使⽤ Electron 构建桌⾯应⽤ 使⽤的 repo 这篇教程是基于⼀个声效器教程的 github 仓库，请使⽤下⾯的命令将它克隆到本地： git clone /bojzi/sound-machine-electron-guide.gi 后查看⼀下，你可以看看这个仓库中有哪些 tag ： git checkout tag-name 我们将跟随这些 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 .j son ⽂件，并在⽂件中加⼊以下内容： { name : sound_machine , version : 0.1.0 , main : ./main.js , scripts : { start : electron . } } 这个 package .j son 的作⽤是： 确定应⽤的名字和版本号， 告诉 Electron main .j s 是 main process 的⼊⼜， 定义启动⼜令 - 在 CLI （终端或者命令⾏）中执⾏ npm start 即可完成依赖安 装。 现在快把 Electron 安装上吧。最简单的安装⽅式应该是通过 npm 安装预构建好的⼆进 制⽂件， 后把它作为开发依赖 （de elopment dependency ）写⼊ package .j son 中 （安 装时带上 --sa e-de 参数即可⾃动写⼊依赖）。在 CLI 中进⼊项⽬⽬录，执⾏下⾯的 命令： npm install --save-dev electron-prebuilt 预构建的⼆进制⽂件会根据操作系统不同⽽不同的，通过执⾏ npm start 安装。我们以 开发依赖的⽅式使⽤它，是因为在项⽬构建中只有在开发阶段才会使⽤到 Electron 。 以上，就是本次 Electron 教程所需要的全部东西了。 对世界说 Hi 创建⼀个 app ⽂件夹，在⽂件夹中新建 index .html ⽂件，并写⼊以下内容： h1Hello, world!/h1 在项⽬的根⽬录创建 main .j s ⽂件。Electron 主线程的⼊⼜是这个 JS ⽂件， 后 “Hello world !” 页⾯也通过它显⽰出来： use strict; var app = require(app); var BrowserWindow = require(browser-window ); var mainWindow = null; app.on(ready , function() { mainWindow = new BrowserWindow({ height: 600, width: 800 }); mainWindow .loadUrl(file:// + __dirname + /app/index .html }); 看起来并不难吧？ app 模块控制着应⽤的⽣命周期 （⽐如，当应⽤进⼊准备状态 （ready status ）的时候 要采取什么⾏动）。 BrowserWindow 模块控制窗⼜的创建。 mainWindow 对象就是你的应⽤窗⼜的主界⾯，当 Ja aScript 垃圾回收机制被触发时窗 ⼜就会被关闭，此时该对象的值是null 。 当 app 获取到 ready 事件后，我们通过 BrowserWindow 创建⼀个 800x600 窗⼜。 这个 window 的渲染器线程将会渲染 index .html ⽂件。 执⾏下⾯这⾏代码，看看我们的应⽤是什么样的： npm start 现在沐浴在这个 app 的圣光中吧。 开发⼀个真正的应⽤ 华丽丽的声效器