Winapp CLI gebruiken met Tauri

In deze handleiding ziet u hoe u de winapp CLI gebruikt met een Tauri-toepassing om fouten op te sporen met pakketidentiteit en uw toepassing als msix te verpakken.

Pakketidentiteit is een kernconcept in het Windows app model. Hiermee heeft uw toepassing toegang tot specifieke Windows API's (zoals meldingen, beveiliging, AI-API's, enzovoort), een schone installatie-/verwijderingservaring en meer.

Bekijk het Tauri-voorbeeld in deze opslagplaats voor een volledig werkvoorbeeld.

Vereiste voorwaarden

1. Windows 11
2. Node.js - winget install OpenJS.NodeJS --source winget
3. Rust Toolchain - Rust installeren met behulp van rustup of winget install Rustlang.Rustup --source winget
4. winapp CLI - winget install microsoft.winappcli --source winget

1. Een nieuwe Tauri-app maken

Begin met het maken van een nieuwe Tauri-toepassing met behulp van het officiële hulpprogramma voor scaffolding:

npm create tauri-app@latest

Volg de aanwijzingen:

• Project naam: tauri-app (of de gewenste naam)
• Front-endtaal: JavaScript
• Package Manager: npm
• UI-sjabloon: Vanilla
• UI-flavor: JavaScript

Navigeer naar uw project map en installeer afhankelijkheden:

cd tauri-app
npm install

Voer de app uit om te controleren of alles werkt:

npm run tauri dev

2. Code bijwerken om identiteit te controleren

We werken de app bij om te controleren of deze wordt uitgevoerd met pakketidentiteit. We gebruiken de windows krat in de Rust-back-end om toegang te krijgen tot Windows API's en deze beschikbaar te maken voor de front-end.

Back-end wijzigingen (Rust)

1. Afhankelijkheid toevoegen: Open src-tauri/Cargo.toml en voeg de volgende regels toe aan het einde van het bestand. Hiermee worden de Windows API-bindingen toegevoegd, zodat we kunnen controleren op pakketidentiteit:

   [target.'cfg(windows)'.dependencies]
   windows = { version = "0.58", features = ["ApplicationModel"] }
   

2. Opdracht toevoegen: open src-tauri/src/lib.rs en voeg de get_package_family_name functie toe. Plaats deze vóór de pub fn run() functie:

   #[tauri::command]
   fn get_package_family_name() -> String {
       #[cfg(target_os = "windows")]
       {
           use windows::ApplicationModel::Package;
           match Package::Current() {
               Ok(package) => {
                   match package.Id() {
                       Ok(id) => match id.FamilyName() {
                           Ok(name) => name.to_string(),
                           Err(_) => "Error retrieving Family Name".to_string(),
                       },
                       Err(_) => "Error retrieving Package ID".to_string(),
                   }
               }
               Err(_) => "No package identity".to_string(),
           }
       }
       #[cfg(not(target_os = "windows"))]
       {
           "Not running on Windows".to_string()
       }
   }
   

3. Opdracht registreren: werk in hetzelfde bestand (src-tauri/src/lib.rs) de run functie bij om de nieuwe opdracht te registreren:

   pub fn run() {
       tauri::Builder::default()
           .plugin(tauri_plugin_opener::init())
           .invoke_handler(tauri::generate_handler![greet, get_package_family_name]) // Add get_package_family_name here
           .run(tauri::generate_context!())
           .expect("error while running tauri application");
   }
   

Front-endwijzigingen (JavaScript)

1. HTML bijwerken: Open src/index.html en voeg een alinea toe om het resultaat weer te geven:

   <!-- ... inside <main> ... -->
   <p id="pfn-msg"></p>
   

2. Updatelogica: Open src/main.js om de opdracht aan te roepen en het resultaat weer te geven:

   const { invoke } = window.__TAURI__.core;
   
   // ... existing code ...
   
   async function checkPackageIdentity() {
     const pfn = await invoke("get_package_family_name");
     const pfnMsgEl = document.querySelector("#pfn-msg");
   
     if (pfn !== "No package identity" && !pfn.startsWith("Error")) {
       pfnMsgEl.textContent = `Package family name: ${pfn}`;
     } else {
       pfnMsgEl.textContent = `Not running with package identity`;
     }
   }
   
   window.addEventListener("DOMContentLoaded", () => {
     // ... existing code ...
     checkPackageIdentity();
   });
   

3. Voer nu de app uit zoals gebruikelijk:

   npm run tauri dev
   

   Je zou 'Niet uitgevoerd met pakketidentiteit' moeten zien in het app-venster. Hiermee wordt bevestigd dat de standaardontwikkelingsbuild wordt uitgevoerd zonder pakketidentiteit.

3. Initialiseer Project met winapp CLI

Met de winapp init opdracht stelt u alles in dat u in één gebruik nodig hebt: app-manifest en -assets. Het manifest definieert de identiteit van uw app (naam, uitgever, versie) die Windows gebruikt om API-toegang te verlenen.

Voer de volgende opdracht uit en volg de aanwijzingen:

winapp init

Wanneer u hierom wordt gevraagd:

• Pakketnaam: druk op Enter om de standaardwaarde te accepteren (tauri-app)
• Publisher naam: Druk op Enter om de standaardinstelling te accepteren of voer uw naam in
• Versie: Druk op Enter om 1.0.0.0 te accepteren
• Toegangspunt: Druk op Enter om de standaardwaarde (tauri-app.exe) te accepteren
• SDK's instellen: Selecteer 'SDK's niet instellen' (Tauri maakt gebruik van de crate van windows Rust, niet de C++ SDK-headers)

Met deze opdracht wordt het volgende uitgevoerd:

• Maken Package.appxmanifest : het manifest waarmee de identiteit van uw app wordt gedefinieerd
• Map maken Assets : pictogrammen die vereist zijn voor MSIX-pakketten en Store-inzending

U kunt openen Package.appxmanifest om eigenschappen zoals de weergavenaam, uitgever en mogelijkheden verder aan te passen.

4. Fouten opsporen met identiteit

Als u fouten wilt opsporen met identiteit, moet u de Rust-back-end bouwen en uitvoeren met winapp run. Omdat npm run tauri dev de levenscyclus van het proces beheert, is het moeilijker om daar de identiteit te injecteren. In plaats daarvan maken we een aangepast script. Er is geen certificaat of ondertekening nodig voor foutopsporing.

1. Script toevoegen: een package.json nieuw script openen tauri:dev:withidentityen toevoegen:

   "scripts": {
     "tauri": "tauri",
     "tauri:dev:withidentity": "cargo build --manifest-path src-tauri/Cargo.toml && (if not exist dist mkdir dist) && copy /Y src-tauri\\target\\debug\\tauri-app.exe dist\\ >nul && winapp run .\\dist"
   }
   

   Wat dit script doet:

   • cargo build ...: Hercompileert de Rust-back-end.
   • copy ... dist\\: Faseer alleen de exe in een dist map (de target\debug map is erg groot en bevat tussenliggende buildartefacten die geen deel uitmaken van uw app).
   • winapp run .\\dist: Registreert een los indelingspakket (net als een echte MSIX-installatie) en start de app.

2. Voer het script uit:

   npm run tauri:dev:withidentity
   

U ziet nu dat de app is geopend en de naam van de pakketfamilie wordt weergegeven, waarbij wordt bevestigd dat deze wordt uitgevoerd met identiteit. U kunt nu beginnen met het gebruik en foutopsporing van API's waarvoor pakketidentiteit is vereist, zoals meldingen of de nieuwe AI-API's zoals PhiSilium.

5. Pakket met MSIX

Zodra u klaar bent om uw app te distribueren, kunt u deze verpakken als een MSIX die de pakketidentiteit aan uw toepassing levert.

Voeg eerst een pack:msix script toe aan uw package.json:

"scripts": {
  "tauri": "tauri",
  "tauri:dev:withidentity": "...",
  "pack:msix": "npm run tauri -- build && (if not exist dist mkdir dist) && copy /Y src-tauri\\target\\release\\tauri-app.exe dist\\ >nul && winapp pack .\\dist --cert .\\devcert.pfx"
}

Wat dit script doet:

• npm run tauri -- build: Bouwt de Rust-back-end in de release-modus.
• copy ... dist\\: Faseer alleen de exe in een dist map (de target\release map is erg groot en bevat tussenliggende buildartefacten die geen deel uitmaken van uw app).
• winapp pack .\\dist --cert .\\devcert.pfx: Verpakt en ondertekent de app als MSIX.

Een ontwikkelingscertificaat genereren

MSIX-pakketten moeten zijn ondertekend. Genereer voor lokaal testen een zelfondertekend ontwikkelingscertificaat:

winapp cert generate --if-exists skip

Bouwen, fasen en inpakken

npm run pack:msix

Het certificaat installeren

Voordat u het MSIX-pakket kunt installeren, moet u het ontwikkelingscertificaat op uw computer vertrouwen. Voer deze opdracht uit als beheerder (u hoeft dit slechts één keer per certificaat te doen):

winapp cert install .\devcert.pfx

Installeren en uitvoeren

Installeer het pakket door te dubbelklikken op het gegenereerde .msix bestand of met behulp van PowerShell:

Add-AppxPackage .\tauri-app.msix

Zodra de app is geïnstalleerd, kunt u de app starten vanuit het menu Start. U ziet dat de app wordt uitgevoerd met identiteit.

Tips

1. Zodra u klaar bent voor distributie, kunt u uw MSIX ondertekenen met een certificaat voor ondertekening van programmacode van een certificeringsinstantie, zodat uw gebruikers geen zelfondertekend certificaat hoeven te installeren.
2. De Microsoft Store zal de MSIX voor u ondertekenen, u hoeft deze niet te ondertekenen voordat u hem indient.
3. Mogelijk moet u meerdere MSIX-pakketten maken, één voor elke architectuur die u ondersteunt (x64, Arm64).

Volgende stappen

• Distribute via winget: Dien uw MSIX in bij de Windows Pakketbeheer Community-opslagplaats
• Publiceren naar de Microsoft Store: gebruik winapp store om uw pakket in te dienen
• Set up CI/CD: Gebruik de GitHub Actie setup-WinAppCli om automatisering van het verpakken in uw pijplijn te realiseren.
• Explore Windows API's: Met pakketidentiteit kunt u nu meldingen, on-device AI en andere identiteitsafhankelijke API's gebruiken