【UWP】使用 Vue/Vite 编写 WinJS/UWP

如今微软网页套壳越来越变本加厉，到处都是一人一个浏览器，套壳大小已经成百上千，但殊不知微软曾经有过对网页套壳的原生支持，打包大小只按k记，那就是 MSAppHost 了，不过更为人所知的是其控件库 WinJS，所以这里就用 WinJS 代指 JS/HTML 模式的 UWP 了。WinJS/UWP 本质就是直接让 Edge (过去为 IE) 的 WebView 直接打开打包好的网页，同时给这个环境加上 WinRT 支持，由于 MSAppHost 是系统组件，所以只用打包 Web 资源就行了。WinJS 曾作为 WSA (Windows Store App) 的主推平台，甚至 Win8 应用商店都是 JS/HTML 开发的，不过在进入 Win10 之后，有了 .NET Native 的加持，C#/UWP 逐渐变为主流，MSAppHost 基本上只剩下了作为 PWA 的用途。然而随着 Edge HTML 的停更，Windows 再也没有了原生的 HTML 渲染平台，微软也在 VS 2019 中彻底删除了对 WinJS 的支持。

不过 MSAppHost 框架作为系统组件并没有被删除，利用 electron-windows-msix 插件，我们可以轻松打包一个 NPM 项目，我们只需要将清单改为 MSAppHost 模式即可。接下来我们将演示如何新建一个 Vue/UWP 项目。
首先我们根据 Vue 官方教程新建一个空白 Vue 项目：

1. npm create vue@latest

复制代码

进入项目文件夹后安装依赖：

1. npm i

复制代码

然后我们测试一下它是否可以正常运行：

1. npm run dev

复制代码

由于 MSAppHost 永远留在了 Edge HTML 18，所以我们需要把 JS 编译到 Edge 18 兼容的版本，安装 @vitejs/plugin-legacy：

1. npm i --save-dev @vitejs/plugin-legacy

复制代码

在 vite.config.ts 配置插件，由于 vite 使用到了新版 ESM 模块特性，所以 Edge 只能使用 Legacy 模式，注意 base 一定要设置为 ./，因为打包插件会把编译结果打包进 app 文件夹：

1. import legacy from '@vitejs/plugin-legacy'
2. ...
3. export default defineConfig({
4.   base: './',
5.   plugins: [
6.     ...
7.     legacy({
8.       targets: 'Edge >= 18',
9.       polyfills: true,
10.       renderModernChunks: false
11.     })
12.   ],
13.   ...
14. })

复制代码

验证可以正常运行后，我们安装 electron-windows-msix 插件：

1. npm i --save-dev electron-windows-msix

复制代码

然后编写打包脚本，可以参考 package.mjs：

1. import { packageMSIX } from "electron-windows-msix";
3. /** @type {import("electron-windows-msix").WindowsSignOptions} */
4. let windowsSignOptions = undefined;
5. const certificateFileIndex = process.argv.indexOf("--certificateFile");
6. if (certificateFileIndex != -1) {
7.     windowsSignOptions = {
8.         certificateFile: process.argv[certificateFileIndex + 1]
9.     };
10.     const certificatePasswordIndex = process.argv.indexOf("--certificatePassword");
11.     if (certificatePasswordIndex != -1) {
12.         windowsSignOptions.certificatePassword = process.argv[certificatePasswordIndex + 1];
13.     }
14.     const timestampServerIndex = process.argv.indexOf("--timestampServer");
15.     if (timestampServerIndex != -1) {
16.         windowsSignOptions.timestampServer = process.argv[timestampServerIndex + 1];
17.     }
18. }
20. const { msixPackage } = await packageMSIX({
21.     appManifest: "AppxManifest.xml",
22.     appDir: "dist",
23.     packageAssets: "assets",
24.     outputDir: "appx",
25.     packageName: "VueForUWP.msix",
26.     windowsKitVersion: "10.0.26100.0",
27.     windowsSignOptions,
28.     sign: !!windowsSignOptions
29. });
30. console.log(`MSIX package created at: ${msixPackage}`);

复制代码

其中 appManifest 是 Appx 清单的路径；appDir 是 vite 编译结果文件夹；packageAssets 是 Appx 资源文件夹，如果不设置会使用插件默认的资源，下面的 Appx 清单使用的就是默认资源；windowsKitVersion 需要选择已安装的 Windows SDK 版本。
由于默认清单是 FullTrust Win32 打包项目，所以我们需要手动编写清单，新建 AppxManifest.xml 文件：

1. <?xml version="1.0" encoding="utf-8"?>
3. <Package
4.   xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
5.   xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest"
6.   xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
7.   xmlns:uap5="http://schemas.microsoft.com/appx/manifest/uap/windows10/5"
8.   IgnorableNamespaces="uap uap5 mp">
10.   <Identity Name="wherewhere.VueForUWP"
11.     Publisher="CN=where"
12.     Version="0.0.1.0" />
14.   <mp:PhoneIdentity PhoneProductId="2d5eb3c5-2697-7f48-4085-ba24fba35ad1"
15.     PhonePublisherId="00000000-0000-0000-0000-000000000000" />
17.   <Properties>
18.     <DisplayName>VueForUWP</DisplayName>
19.     <PublisherDisplayName>wherewhere</PublisherDisplayName>
20.     <Logo>assets\icon.png</Logo>
21.   </Properties>
23.   <Dependencies>
24.     <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.18362.0"
25.       MaxVersionTested="10.0.26100.0" />
26.   </Dependencies>
28.   <Resources>
29.     <Resource Language="en-us" />
30.   </Resources>
32.   
33.    
34.       <uap:VisualElements
35.         DisplayName="VueForUWP"
36.         Description="UWP running with vue.js 3.0"
37.         BackgroundColor="transparent"
38.         Square150x150Logo="assets\Square150x150Logo.png"
39.         Square44x44Logo="assets\Square44x44Logo.png">
40.         <uap:DefaultTile
41.           Wide310x150Logo="assets\Wide310x150Logo.scale-200.png">
42.           <uap:ShowNameOnTiles>
43.             <uap:ShowOn Tile="square150x150Logo" />
44.           </uap:ShowNameOnTiles>
45.         </uap:DefaultTile>
46.         <uap:SplashScreen Image="assets\SplashScreen.scale-200.png" uap5:Optional="true" />
47.         <uap:InitialRotationPreference>
48.           <uap:Rotation Preference="landscape" />
49.           <uap:Rotation Preference="portrait" />
50.           <uap:Rotation Preference="landscapeFlipped" />
51.           <uap:Rotation Preference="portraitFlipped" />
52.         </uap:InitialRotationPreference>
53.       </uap:VisualElements>
54.       <uap:ApplicationContentUriRules>
55.         <uap:Rule Match="ms-appx-web:///" Type="include" WindowsRuntimeAccess="all" />
56.       </uap:ApplicationContentUriRules>
57.     </Application>
58.   </Applications>
60.   <Capabilities>
61.     <Capability Name="internetClient" />
62.   </Capabilities>
63. </Package>

复制代码

然后编写部署脚本，可以参考 deploy.mjs：

1. import { powershell } from "electron-windows-msix/lib/powershell.js";
3. const results = await powershell("Add-AppxPackage -Path appx/msix_layout/AppxManifest.xml -Register");
4. console.log(results);

复制代码

 最后在 package.json 中添加打包和部署指令：

1. {
2.   ...
3.   "scripts": {
4.     ...
5.     "pack": "npm run build && node package.mjs",
6.     "deploy": "node deploy.mjs"
7.   },
8.   ...
9. }

复制代码

现在我们可以通过执行 npm run pack 打包项目，用 npm run deploy 部署项目了。

由于 MSAppHost 永远留在了 Edge HTML 18，所以新的 Vue 样式库基本上都无法使用，为了符合 Windows 样式，还是建议使用 WinJS 控件库，可以在这里找到示例：https://github.com/wherewhere/VueForUWP

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！