非常教程

Electron参考手册

指南 | Guides

Windows应用商店指南 | Windows Store Guide

在Windows 10中,旧版win32可执行文件获得了新的兄弟:Universal Windows Platform。新.appx格式不仅支持许多新的功能强大的API,例如Cortana或推送通知,还可以通过Windows应用商店简化安装和更新。

微软开发了一个将Electron应用程序编译为.appx包的工具,使开发人员能够使用新应用程序模型中的一些好东西。本指南解释了如何使用它 - 以及Electron AppX软件包的功能和局限性。

背景和要求

Windows 10“周年纪念更新”能够.exe通过与虚拟化文件系统和注册表一起启动它们来运行win32 二进制文件。两者都是在编译期间通过在Windows容器中运行应用程序和安装程序创建的,从而允许Windows在安装过程中准确识别对操作系统所做的修改。将可执行文件与虚拟文件系统和虚拟注册表配对允许Windows启用一键式安装和卸载。

另外,这个exe是在appx模型中启动的 - 这意味着它可以使用Universal Windows Platform提供的许多API。为了获得更多的功能,Electron应用程序可以与一个不可见的UWP后台任务配合使用,这些后台任务可以与后台运行的任务一起exe启动,在后台运行任务,接收推送通知或与其他UWP应用程序通信。

要编译任何现有的Electron应用程序,请确保您具有以下要求:

  • 带有周年更新的Windows 10(2016年8月2日发布)
  • Windows 10 SDK,可在此下载
  • 至少节点4(检查,运行node -v

然后,去安装electron-windows-storeCLI:

npm install -g electron-windows-store

第1步:打包Electron 应用程序

使用electron-packager(或类似的工具)打包应用程序。确保node_modules在最终的应用程序中删除你不需要的东西,因为任何你不需要的模块都会增加你的应用程序的大小。

输出应该大致如下所示:

├── Ghost.exe
├── LICENSE
├── content_resources_200_percent.pak
├── content_shell.pak
├── d3dcompiler_47.dll
├── ffmpeg.dll
├── icudtl.dat
├── libEGL.dll
├── libGLESv2.dll
├── locales
│   ├── am.pak
│   ├── ar.pak
│   ├── [...]
├── natives_blob.bin
├── node.dll
├── resources
│   ├── app
│   └── atom.asar
├── snapshot_blob.bin
├── squirrel.exe
└── ui_resources_200_percent.pak

第2步:运行electron-windows-store

从提升的PowerShell(以“Administrator”身份运行它),运行electron-windows-store所需参数,同时传递输入和输出目录,应用程序的名称和版本以及node_modules应该展平的确认。

electron-windows-store `
    --input-directory C:\myelectronapp `
    --output-directory C:\output\myelectronapp `
    --flatten true `
    --package-version 1.0.0.0 `
    --package-name myelectronapp

一旦执行,该工具就起作用:它接受你的Electron应用程序作为输入,展平node_modules。然后,它将您的应用程序归档为app.zip。使用安装程序和Windows容器,该工具会创建一个“扩展的”AppX软件包 - 包括Windows Application Manifest(AppXManifest.xml)以及输出文件夹中的虚拟文件系统和虚拟注册表。

创建扩展的AppX文件后,该工具将使用Windows App Packager(MakeAppx.exe)从磁盘上的这些文件创建单个文件的AppX软件包。最后,该工具可用于在计算机上创建可信证书以签署新的AppX软件包。使用签名的AppX软件包,CLI也可以自动将软件包安装到您的机器上。

第3步:使用AppX软件包

为了运行你的软件包,你的用户将需要Windows 10所谓的“周年纪念更新” - 关于如何更新Windows的细节可以在这里找到。

与传统的UWP应用程序相反,打包的应用程序目前需要经过手动验证过程,您可以在这里申请。与此同时,所有用户都可以通过双击来安装软件包,因此如果您只是在寻找更简单的安装方法,则可能不需要提交到商店。在托管环境(通常是企业)中,Add-AppxPackage 可以使用PowerShell Cmdlet以自动方式进行安装。

另一个重要限制是已编译的AppX程序包仍包含一个win32可执行文件 - 因此不能在Xbox,HoloLens或Phones上运行。

可选:使用BackgroundTask添加UWP功能

您可以将您的Electron应用与无形的UWP背景任务配对,以充分利用Windows 10的功能 - 例如推送通知,Cortana集成或实时切片。

要了解使用后台任务的Electron应用程序如何发送Toast通知和实时图块,请查看Microsoft提供的示例。

可选:使用容器虚拟化进行转换

为了生成AppX软件包,electron-windows-storeCLI使用了适用于大多数Electron应用程序的模板。但是,如果您使用自定义安装程序,或者您在生成的软件包中遇到任何问题,则可以尝试使用Windows容器进行编译来创建软件包 - 在该模式下,CLI将在空白Windows中安装并运行应用程序容器来确定您的应用程序正在对操作系统进行哪些修改。

在第一次运行CLI之前,您必须设置“Windows桌面应用程序转换器”。这将需要几分钟的时间,但不用担心 - 你只需要做一次。从这里下载和桌面应用程序转换器。您将收到两个文件:DesktopAppConverter.zipBaseImage-14316.wim

  1. 解压缩DesktopAppConverter.zip。从提升的PowerShell(以“以管理员身份运行”打开时,请确保您的系统执行策略允许我们通过调用来运行我们打算运行的所有内容Set-ExecutionPolicy bypass
  1. 然后,运行桌面应用程序转换器的安装BaseImage-14316.wim,通过调用传递Windows基本映像的位置(作为下载).\DesktopAppConverter.ps1 -Setup -BaseImage .\BaseImage-14316.wim
  1. 如果运行上述命令会提示您重新启动,请重新启动计算机并在成功重新启动后再次运行上述命令。

安装成功后,您可以继续编译您的Electron应用程序。

Electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。

主页 https://electron.atom.io/
源码 https://github.com/electron/electron
发布版本 1.7.9

Electron目录

1.指南 | Guides
2.指南·开发 | Guides: Development
3.Webview 组件 |
4.加速器 | Accelerator
5.API
6.API·对象 | API·Objects
7.app
8.autoUpdater
9.浏览器总览 | BrowserView
10.浏览器窗口 | BrowserWindow
11.浏览器窗口代理 | BrowserWindowProxy)
12.ClientRequest
13.剪贴板 | clipboard
14.内容追踪 | contentTracing
15.小型文字档案 | Cookies
16.crashReporter
17.调试器 | Debugger
18.desktopCapturer
19.dialog
20.电子下载 | DownloadItem
21.环境变量 | Environment Variables
22.无框窗口 | Frameless Window
23.globalShortcut
24.IncomingMessage
25.ipcMain
26.IPC渲染器 | ipcRenderer
27.语言环境 | Locales
28.画面 | Menu
29.MenuItem
30.本地图像 | nativeImage
31.net
32.通知 | Notification
33.权限监控 | powerMonitor
34.权限存储拦截器 | powerSaveBlocker
35.处理 | process
36.协议 | protocol
37.远程 | remote
38.sandbox
39.屏幕 | screen
40.会话 | session
41.shell
42.系统表现 | systemPreferences
43.触摸板 | TouchBar
44.触摸板按钮 | TouchBarButton
45.触摸板颜色选择器 | TouchBarColorPicker
46.触摸板组 | TouchBarGroup
47.触摸板标签 | TouchBarLabel
48.触摸板弹出框 | TouchBarPopover
49.触摸板清理 | TouchBarScrubber
50.触摸板分段控制 | TouchBarSegmentedControl
51.触摸板滑块 | TouchBarSlider
52.触摸板间隔 | TouchBarSpacer
53.Tray
54.网页内容 | webContents
55.网页框架 | webFrame
56.网页要求 | WebRequest
57.窗口开启 | window.open