O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 17 Anúncio

.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式

Baixar para ler offline

Web 技術要統治世界真的不是說說的,現在到哪裡都可以看得到 web 技術的影子,透過 web 技術打造 Windows 應用程式也早已行之有年,但過去許多工具產出來的應用程式大小都非常龐大,直到 Tauri 的出現提供了我們另外一種選擇,透過 Tauri 我們可以輕易的打造檔案更小、速度更快、也更安全的 Windows 應用程式,而你所要會的,依然還是那些本來就該會的前端開發知識而已!本次分享將帶大家實際看看使用 Tauri 來撰寫 Windows 應用程式是一個怎麼樣的體驗。

Web 技術要統治世界真的不是說說的,現在到哪裡都可以看得到 web 技術的影子,透過 web 技術打造 Windows 應用程式也早已行之有年,但過去許多工具產出來的應用程式大小都非常龐大,直到 Tauri 的出現提供了我們另外一種選擇,透過 Tauri 我們可以輕易的打造檔案更小、速度更快、也更安全的 Windows 應用程式,而你所要會的,依然還是那些本來就該會的前端開發知識而已!本次分享將帶大家實際看看使用 Tauri 來撰寫 Windows 應用程式是一個怎麼樣的體驗。

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Semelhante a .NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式 (20)

Mais de 升煌 黃 (12)

Anúncio

Mais recentes (20)

.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式

  1. 1. TAIWAN
  2. 2. Tauri 前端人員也能打造小巧快速的 Windows 應用程式 黃升煌 Mike
  3. 3. About Me • Title • 多奇數位創意有限公司 • Microsoft MVP • Angular GDE • Awards • 2018 iT 邦幫忙鐵人賽 冠軍 • 2019 iT 邦幫忙鐵人賽 優選 • 第 12 屆 iThome 鐵人賽 冠軍 • 著作:打通 RxJS 任督二脈 https://github.com/wellwind https://www.facebook.com/fullstackledder https://fullstackladder.dev
  4. 4. About Tauri • 以 Web 技術建立桌面應用程式的工具 • 支援任何前端框架 (Blazor WebAssembly 也能通) • 基於 Rust 建立的核心 • 兼具安全及效能 • 以 Node.js 作為 CLI 工具 • 任何一位前端開發人員都會使用 • 使用作業系統內的瀏覽器,而非額外包裝一個 Chromium 瀏覽器 • 應用程式更小,預設專案產出執行檔大小約 7MB • Windows: WebView 2 (Windows 11 內建) • MacOS: Safari • Linux: WebKitGTK
  5. 5. DEMO https://github.com/wellwind/dotnet-conf-taiwan-2022-tauri
  6. 6. 建立 Tauri 前的準備 https://tauri.app/v1/guides/getting-started/prerequisites
  7. 7. 建立 Tauri 專案
  8. 8. 使用 create-tauri-app 建立專案 • npm create tauri-app • Project name · my-first-tauri-app • Choose your package manager · npm • Choose your UI template · vanilla-ts • cd my-first-tauri-app • npm install • npm run tauri dev (開發中) • npm run tauri build (開發完,打包) • 輸出到 src-tauri/target/release
  9. 9. create-tauri-app 內建多種前端 JS/TS 範本
  10. 10. Tauri 專案架構 前端程式碼 Tauri 相關程式碼與設定 Tauri 應用程式設定 前端套件與指令設定
  11. 11. 呼叫 Rust 程式 import { invoke } from "@tauri-apps/api/tauri"; const message = await invoke<string>('greet', { name: 'Mike' }); main.ts #[tauri::command] fn greet ( name: &str ) -> String { format!("Hello, {}! You've been greeted from Rust!", name) } main.rs
  12. 12. 呼叫 JavaScript / TypeScript API import { writeTextFile, BaseDirectory } from "@tauri-apps/api/fs"; await writeTextFile( "hello.txt", "Hello World", { dir: BaseDirectory.Desktop, }); 注意:許多 API 都需要進行一些權限設定才可以使用,開始前請先詳讀文件! ex:fs API 需要另外調整 tauri.allowList.fs.scope 來設定可進行檔案存取的範圍 { "tauri": { "allowlist": { "fs": { ..., "scope": ["$DESKTOP/*"] } } }, ... }
  13. 13. 同場加映 – Tauri + BlazorWASM:專案結構設定 • 將前端相關程式移除,只留下 package.json • src 目錄改為 Blazor WebAssembly 建立的專案內容 • dotnet new blazorwasm --name TauriWebDemo --output src • 更改 package.json 的 scripts: {} • tauri.conf.json 的 • build.distDir 修改為 ../dist/wwwroot • Build.devPath 修改為 Blazor WebAssembly 開啟的 URL & Port { "scripts": { "dev": "dotnet watch run --project src/TauriWebDemo.csproj --non-interactive", "build": "cd src && dotnet publish -c Release -o ../dist", "tauri": "tauri" } }
  14. 14. 同場加映 – Tauri + BlazorWASM:使用 JavaScript API (1) • 確保 tauri.conf.json 的 build.withGlobalTauri 為 true • 所有 JavaScript API 都在 window.__TAURI__.* • ex: • invoke: window.__TAURI__.tauri.invoke • fs.writeTextFile: window.__TAURI__.fs.writeTextFile
  15. 15. 同場加映 – Tauri + BlazorWASM:使用 JavaScript API (2) • 注入 IJSRuntime • 呼叫 Tauri JavaScript API @inject IJSRuntime JSRuntime; // 呼叫 Tauri 的 Invoke var message = await JSRuntime.InvokeAsync<string>( "window.__TAURI_INVOKE__", "greet", new { name = currentCount.ToString() }); // 用 eval 取得 Tauri JavaScript API 內建的常數 var desktopBasePath = await JSRuntime.InvokeAsync<int>( "eval", "window.__TAURI__.fs.BaseDirectory.Desktop"); // 呼叫 Tauri 的 JavaScript API await JSRuntime.InvokeVoidAsync( "window.__TAURI__.fs.writeTextFile", "tauri-greet.txt", message, new { dir = desktopBasePath });
  16. 16. Resources • Tauri.app • Awesome Tauri • Tauri 初體驗:前端打造桌面應用程式的小巧快速新選擇 • 將 Blazor WebAssembly 整合進 Tauri 應用程式
  17. 17. 以及各位參與活動的你們 特別感謝

×