利用 Tauri实现IOS端开发

什么是 Tauri

Tauri 身为一个跨平台框架，用于为所有主要桌面平台构建小巧、速度极快的二进制文件。 开发人员可以集成任何编译为 HTML、JS 和 CSS 的前端框架来构建他们的用户界面。 应用程序的后端是一个 rust-sourced 二进制文件，带有前端可以与之交互的 API。

本文主要实现Demo

• Web
• MacOS
• IOS

初始化项目

create-tauri-app v3 alpha 已经发布，目前还存在较多问题，本实例用 v2做说明

• 执行初始化命令

# 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
• 执行指令

cd tauri-app-v2
pnpm install
pnpm tauri dev

运行效果

执行命令行成功后的效果

webview 与系统通讯

验证webview 与 系统是否通讯正常

• 修改 /src-tauri/src/main.rs

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

// Learn more about Tauri commands at https://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 修改为

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://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
  // https://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 项目 执行

cargo add tauri@2.0.0-alpha.0 
cargo add tauri-build@2.0.0-alpha.0 --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

use tauri::App;

#[cfg(mobile)]
mod mobile;
#[cfg(mobile)]
pub use mobile::*;

pub type SetupHook = Box<dyn FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send>;

#[derive(Default)]
pub struct AppBuilder {
  setup: Option<SetupHook>,
}

impl AppBuilder {
  pub fn new() -> Self {
    Self::default()
  }

  #[must_use]
  pub fn setup<F>(mut self, setup: F) -> Self
  where
    F: FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send + 'static,
  {
    self.setup.replace(Box::new(setup));
    self
  }

  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

#[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,可以持续关注后续推进，从开发层面，工具生态还需完善！