淡人日记

落花无言,人淡如菊,书之岁华,其曰可读

将uniapp生成的H5上线到微软商店

uniapp配置

  • mainfest.json Web配置中运行的基础路径设置为./,意思是相对路径

electron入口文件 main.js

const {app, BrowserWindow, Menu} = require('electron')
const path = require("path")

const createWindow = () => {
	Menu.setApplicationMenu(null)
	const win = new BrowserWindow({
		width: 410,
		height: 760,
		icon: path.join(__dirname, "./logo/SampleAppx.150x150.png.jpg") //页面图标
	})
	win.loadFile('./source/index.html')                               //将uniapp打包的h5放置在main.js 同级目录中
}

app.whenReady().then(() => {
	createWindow()
})

electron打包成exe

npm install electron-packager
electron-packager ./ exeName --asar --icon='./logo/logo.ico' --out='./packageOut' --overwrite --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/

# ./ 入口文件
# exeName
# --asar 将源码包打包成为asar文件
# --icon 打包的exe的图标
# --out  输出目录
# --overwrite
# --download.mirrorOptions.mirror 加速镜像在中国区域请使用此参数,要不然打包速度会非常慢

将exe打包成appx

npm install electron-windows-store
electron-windows-store --package-name packageName --identity-name xxxxxx.xxxxxx --publisher-display-name xxx --assets ./build/appx --input-directory ./packageOut/vCardTools-win32-x64 --output-directory ./packageOut/msStore --package-version 1.0.6.0
# --package-name
# --identity-name 在微软商店创建应用后获取
# --publisher-display-name 在微软商店创建应用后获取
# --assets 静态文件目录,生成的appx的logo图标放在此目录,图片大小及命名规则如下
# ![SampleAppx.44x44.png]
# ![SampleAppx.50x50.png]
# ![SampleAppx.150x150.png]
# ![SampleAppx.310x150.png]
# --input-directory 入口文件
# --output-directory 出口文件
# ----package-version 版本号

将appx打包成appxbundle

微软商店规定如果第一次上传的bundle包,则后续更新都要上传bundle包

  • 创建输入文件 a.txt
[Files]
    "E:\ME\tel-electron\packageOut\msStore\vCardTools.appx"                 "vCardTools.appx"
  • 执行打包命令
makeappx 在windowsKit中,执行electron-windows-store时可将其安装,安装后添加到系统变量中
MakeAppx a.txt /output/a.appxbundle

目录