在这篇文章中，我将会记录将一个electron应用提交到Windows应用商店的流程。
基本概况：
- 应用基于electron + vue
- 使用electron-builder打包
electron-builder appx文档
教程1
教程2
整体步骤
1. 建立你的electron应用
假设你已经拥有了一个可以正常运行、正常打包的的electron应用。
我的应用基于vue，使用的是electron-builder进行打包，并使用nsis来封装应用安装包。
正常情况下，当你打包完成后，你会在build文件夹下获得一个dist_electron的目录，这里面是未封装的exe程序。
2. 安装Windows SDK
前往以下网址，根据你的系统版本，下载并安装Windows SDK
Windows SDK
安装完成后，记录下你的SDK安装地址，稍后要用：C:\Program Files (x86)\Windows Kits\10\bin\10.0.22621.0\x64
3. 注册微软合作伙伴账号
根据官方说明，你需要前往Microsoft 合作伙伴中心，登录你的微软账号，然后根据引导注册一个开发者账号。
微软的开发者账号是绑定在微软账号上的，并且对个人和企业收取不同的费用，和苹果的年费会员制不同，这个费用是一次性的。个人19美元，公司99美元。
注意，在注册开发者账号时，省、市使用拼音首字母，不要用中文，否则很容易出现2201错误导致无法继续
注册完账号后，右上角进入账户设置并设置你的默认“付款配置文件和税务配置文件”。任何在微软商店的收入都将通过这个配置文件支付给你。
在设置税务配置文件时，很容易报错，务必注意当要求你输入常住地址时，下方选择“该地址不包含邮政信箱”，在下一页的邮寄地址中再录入一遍你的地址。
4. 注册你的应用
进入合作伙伴中心，打开控制台，选择应用和游戏
点击“新产品”，选择“msix或pwa应用”
在后续页面中设置你的应用名称并保存。其他信息你可以开始填了，比如隐私政策页面、定价、网站、联系方式等等，先把能填的都填写并保存。
现在进入左侧菜单上的产品管理-产品标识，我们会看到包/标识/名称、包/标识/发行商、包/属性/发布者显示名称，把这三个记下来，待会要用
5. 准备app图标
在项目下新建icons文件夹，放入icon256.ico作为应用的图标
在icons下新建appx目录，放入以下4个图标文件（文件名必须完全相同），稍后会用到
- StoreLogo.png 商店的图标，512*512
- Square150x150Logo.png 商店和开始菜单磁贴的图标，150*150
- Square44x44Logo.png 任务栏和开始菜单列表中的图标，44*44
- Wide310x150Logo.png 开始菜单长条形磁贴的图标 310*150
6. 打包生成.appx包
以下内容可以参考Electron-builder AppX
//vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
productName: "Your product name",
directories: {
buildResources: "./icons",
},
win: {
icon: "./icons/icon256.ico",
target: ["nsis", "appx"],
},
appx: {
identityName: "Your app identity name",
publisher: "Your app publisher identity",
publisherDisplayName: "Your app publisher name",
applicationId: "Your app id",
languages: ["zh-CN"],
},
},
},
},
};
- buildResources: "./icons": 将这个文件夹下的文件打包进最终目标中
- icon: "./icons/icon256.ico": 应用图标
- target: [“nsis","appx"]: 使用nsis打包、生成appx包
-
identityName、publisher、publisherDisplayName这三个就是刚才从合作伙伴中心上面记下来的三个字段
QQ截图20230819221827.jpg - applicationId: 你可以用你的应用名称或是appid，自定义的。最好是用builderOptions.appId
- languages: 指定你的程序语言，如果这个为空，那么就默认是en-US，这也会显示在微软商店中
接下来执行
npm run electron:build
打包生成你的应用，你会在./build目录下看到你的appx安装包。
7. appx包的本地测试
此时双击安装appx包是无法安装的，会提示未签名无法使用，所以我们现在要创建一个证书来自签名并运行这个应用。
进入win11设置，隐私和安全性，开发者选项中，打开开发者模式
然后回到项目文件夹下，新建code-signing文件夹
全局安装electron-builder
npm i electron-builder -g
到命令行中创建一个自签名用的证书。前往合作伙伴中心中的“包/标识/发行商”，找到那个CN=XXXXX，运行下面的命令（注意去掉“CN=”只要XXXXX）：
electron-builder create-self-signed-cert -p XXXXX
弹出的框选择None
一个证书就创建好了：
将这个cert文件和刚才打包好的appx包都复制到code-signing下：
确保系统中安装了Visual Studio，在开始菜单中找到Developer Command Prompt并打开：
cd到code-sigining文件夹：
运行
SignTool sign /fd SHA256 /a /f XXXXX.pfx unsignedapp.appx
即可完成签名
这时候你双击你的appx就可以安装并进行本地测试了：
如果还是提示签名问题，则按这个教程添加一下证书
8. appx包的兼容性问题
- child_process.spawn无法运行
在生成appx后的应用中无法运行以下代码，会提示 "xxx.exe 缺少部署内容。请参阅 windows 审查文档"。
child_process.spawn(cmdline, [args], {
shell: true
})
此时务必将shell改为false，或是使用child_process.execFile来执行第三方代码。
- 迷之userData
当在electron中运行以下代码获取临时文件夹时，
app.getPath("userData")
正常情况下应该返回
C:\Users[username]\AppData\Roaming[appname]
而实际上AppX包的临时文件夹可能是
C:\Users[username]\AppData\Local\Packages[appid]\LocalCache\Roaming[appname]
因此当你把app.getPath("userData")当做参数传入一些第三方工具时，这个地址可能会获取不到。这可能是一个electron bug。
因此建议使用app.getPath("temp")文件夹存储临时文件
9. 如何在上传商店后测试
微软也有类似苹果Testflight的机制，可以在微软签名后进行内测。
前往商店新建一个提交，在定价和可用性那里选择免费，并在可见性一栏选择“特定受众”，新建或是选择一个用户组，这个用户组请务必包括你自己的邮箱。
然后回到合作伙伴中心的“应用和游戏”首页，左侧选中“促销代码”并新建兑换码
这个版本提交后就会很快通过，你可以在刚才“定价和可用性”上面找到应用的链接，进入之后点击兑换代码，吧刚生产的兑换码输入进去，你就可以直接下载微软签名的版本进行测试了。
10.全部测试完成后你就可以新建一个公开的提交，然后上传到应用商店了。
一些注意事项：
- 你至少需要准备两张海报，分别是1280 * 800和1080 * 1080用于应用商店的展示
- 你需要一个网站来作为软件的官网和隐私政策的页面，你还需要一个邮箱作为技术支持邮箱
- 在提交页面，商店会提示你应用有runFullTrust权限，需要提供原因，这时候在下面填写"这是一个electron应用"即可
