Windows商店指南

分类：Electron作者：编程之家用户

在 Windows 8 中, 一些不错的旧 win32 程序迎来了一个新朋友: 通用Windows平台(UWP)。 新的 .appx 格式不仅启用了许多新的强大的 API，如 Cortana 或推送通知，而且通过Windows 应用商店，也同时简化了安装和更新。

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

背景和要求

Windows 10 的 周年更新 能够运行 win32 .exe 程序并且它们的虚拟化文件系统和注册表跟随一起启动。 两者都是通过在 Windows 容器中运行应用程序和安装器编译后创建的，允许 Windows 在安装过程中正确识别操作系统进行了哪些修改。 将可执行文件和虚拟文件系统与虚拟注册表配对, 允许 Windows 启用一键安装和卸载。

此外，exe 在 appx 模型内启动 - 这意味着它可以使用通用 Windows 平台可用的许多 API。 为了获得更多的功能，Electron 应用程序可以与一个看不见的 UWP 后台任务配合使用，它与 exe 一起启动，作为后台运行任务的接收器，接收推送通知或与其他 UWP 应用程序通信 。

要编译任何现有的 Electron 应用程序，请确保满足以下要求:

  • Windows 10及周年更新 (2016年8月2日发布的)

  • Windows 10 SDK, 这里下载

  • 最新的 Node 4 (运行 node -v 来确认)

然后, 安装 electron-windows-store CLI:

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
└── xinput1_3.dll

步骤 2: 运行 electron-windows-store

从提权的 PowerShell（用管理员身份运行它）中,以所需的参数运行 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 应用程序清单 （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 通知和活动磁贴,请查看微软提供的案例.

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

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

在运行 CLI 之前，您必须设置 “Windows Desktop App Converter” 。 这将需要几分钟，但不要担心 - 你只需要这样做一次。 从这里下载 Desktop App Converter

您将得到两个文件： DesktopAppConverter.zip 和 BaseImage-14316.wim.

  1. 解压 DesktopAppConverter.zip. 打开提权的 PowerShell (用以管理员权限运行打开, 确保您的系统执行策略允许我们通过调用 Set-ExecutionPolicy bypass 来运行我们想要运行的一切).

  2. 然后, 通过调用 .\DesktopAppConverter.ps1 -Setup -BaseImage .\BaseImage-14316.wim, 运行 Desktop App Converter 安装，并传递 Windows 基本映像的位置 (下载的 BaseImage-14316.wim).

  3. 如果运行以上命令提示您重新启动，请重新启动计算机，并在成功重新启动后再次运行上述命令。

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

商店指南指南

相关推荐

electron打包中的坑如何解决
这篇文章主要讲解了“electron打包中的坑如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“electron...
electron打包的坑如何解决
这篇文章主要介绍“electron打包的坑如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“electron打包的坑如何...
VSCode中如何调试Electron应用的主进程代码
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟...
如何在VSCode上调试Electron应用的主进程代码
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价
使用electron-vue搭建桌面应用程序项目
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内，和之前的vue-cli搭建项目流程没有任何区别 GIT地址：https://github.com/SimulatedGREG/electron-vue 搭建项目：1.全局安装脚手架：npminstall--globalvue-cli
electron安装
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron，并测试。如下图
为Electron 安装 vue-devtool等扩展
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
Electron学习一——— electron的基础创建
前言本人是做java开发的（菜鸟），做web项目的朋友们基本上都会遇到同样一个，永远不知道客户会怎么样使用，或者说永远不知道客户会用什么浏览器打开我们做出来的应用，就算你跟他说明了一定得用某某某浏览器打开，还是有人会用别的浏览器打开，这种情况通常我们会去做适配（前端），最近公司有需求
electron-builder的使用初接触，有些含义不懂
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装，使用npm安装的有问题（没有尝试），先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
asar 如何解密加密？electron 的 asar 的具体用法
来源：https:/ewsn.net/say/electron-asar.html 在electron中，asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下，这些代码逻辑，是放置在resource/app目录下面的，明文可见，这样的话，也就有了代码加密（asar打包）的需求 asar如何解密加密？electron的asar的
iview框架使用electron运行图标无法显示问题
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
electron-vue 图片加载失败后使用默认头像
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
electron-vue打包引用的图标不显示问题
在electron-vue中使用了字体图标，但是打包成.exe文件后图标不显示，路劲问题把字体图标放到static目录下就可以了，静态图片也一样我原来放在其它地方不行改到static目录就可以了
electron-vue 设置cookie
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
Electron笔记
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法：单独设置electron为淘宝镜像，npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
electron打包分发
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装，不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题（就
electron开发客户端注意事项兼开源个人知识管理工具“想学吗”
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
javascript – 具有下载属性的电子问题
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG：<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
Electron实现第一个应用 &quot;hello world&quot;
一.什么是Electron?它和NW.js的区别是什么？Electron是GitHub开发的桌面应用开发框架，它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是：1.整合Chromium和Node.js的方式不同。在NW.js中，Chromium是直接被打补丁打进去
electron-vue 打开文件目录，打开文件夹，
1.打开父子模态创建，<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot