利用 Tauri實現IOS端開發
什麼是 Tauri
Tauri 身為一個跨平臺框架，用於為所有主要桌面平臺構建小巧、速度極快的二進位制檔案。 開發人員可以整合任何編譯為 HTML、JS 和 CSS 的前端框架來構建他們的使用者介面。 應用程式的後端是一個 rust-sourced 二進位制檔案，帶有前端可以與之互動的 API。
本文主要實現Demo
- Web
- MacOS
- IOS
初始化專案
create-tauri-app v3 alpha 已經發布，目前還存在較多問題，本例項用 v2做說明 + 執行初始化命令 ```shell
pnpm
pnpm create tauri-app@2
yarn
yarn create tauri-app@2
npm
npm create tauri-app@2
+ 填寫專案名稱 如 `tauri-app-v2`
+ 選擇包管理 `pnpm` or `yarn` or `npm`
+ 選擇UI `react-ts`
+ 執行指令sh
cd tauri-app-v2
pnpm install
pnpm tauri dev
```
執行效果
執行命令列成功後的效果
webview 與系統通訊
驗證webview 與 系統是否通訊正常
+ 修改/src-tauri/src/main.rs```rust
![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
// Learn more about Tauri commands at http://tauri.app/v1/guides/features/command
[tauri::command]
fn greet(name: &str) -> String { println!("Hello, {}! You've been greeted from Rust!", name); // 增加 format!("Hello, {}! You've been greeted from Rust!", name) }
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
``
+ 編譯成功、重新彈出輸入框後 錄入Tauri`、 點選 Greet
+ 命令列輸出
Hello, Tauri! You've been greeted from Rust! 執行成功
專案升級適配Mobile
Js 部分改造
- 根目錄執行
pnpm update @tauri-apps/cli@next @tauri-apps/api@next - 編輯
vite.config.ts修改為 ```js import { defineConfig } from "vite"; import react from "@vitejs/plugin-react";
// http://vitejs.dev/config/ export default defineConfig({ plugins: [react()],
// Vite options tailored for Tauri development and only applied in tauri dev or tauri build
// prevent vite from obscuring rust errors
clearScreen: false,
// tauri expects a fixed port, fail if that port is not available
server: {
port: 1420,
strictPort: true,
host:true
},
preview:{
host:true
},
// to make use of TAURI_DEBUG and other env variables
// http://tauri.studio/v1/api/config#buildconfig.beforedevcommand
envPrefix: ["VITE_", "TAURI_"],
build: {
// Tauri supports es2021
target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
// don't minify for debug builds
minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
// produce sourcemaps for debug builds
sourcemap: !!process.env.TAURI_DEBUG,
},
});
```
Rust 部分改造
- 進入
src-tauri專案 執行sh cargo add [email protected] cargo add [email protected] --build cargo install tauri-cli --version "^2.0.0-alpha"``` - 修改
src-tauri/Cargo.toml增加rust [lib] crate-type = ["staticlib", "cdylib", "rlib"] - 建立
src-tauri/src/lib.rs```rust use tauri::App;
[cfg(mobile)]
mod mobile;
[cfg(mobile)]
pub use mobile::*;
pub type SetupHook = Box
[derive(Default)]
pub struct AppBuilder {
setup: Option
impl AppBuilder { pub fn new() -> Self { Self::default() }
#[must_use]
pub fn setup
pub fn run(self) {
let setup = self.setup;
tauri::Builder::default()
.setup(move |app| {
if let Some(setup) = setup {
(setup)(app)?;
}
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
}
建立 `src-tauri/src/mobile.rs`rust
[tauri::mobile_entry_point]
fn main() {
super::AppBuilder::new().run();
}
修改 `src-tauri/src/main.rs`
![cfg_attr(
all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )]
pub fn main() { tauri_app_v2::AppBuilder::new().run(); } ```
例項化&除錯
- 執行
cargo tauri ios init生成IOS產物 - 執行
cargo tauri ios dev進行除錯- 執行
pnpm tauri ios dev --open開啟可 xcode進行除錯
- 執行
最終效果
總結
目前 Tauri 移動端的開發還停留在 Alpha階段，會有很多不確定性問題和bug,可以持續關注後續推進，從開發層面，工具生態還需完善！