Tauri Mobile-使用JavaScript和Rust开发移动应用程序

发表于 2023-08-15 更新于 2024-05-02 分类于 web 阅读次数：本文字数： 5.5k 阅读时长 ≈ 5 分钟

1. 前言

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

因此，Tauri 是一个框架，允许您使用您已经熟悉的技术构建跨平台应用程序。现在它还支持移动应用程序。听起来很棒，不是吗?

2. 为什么使用 Tauri

现在，为什么要使用像 Tauri 这样的东西而不是 KotlinAndroid 应用程序和 SwiftiOS 应用程序呢？首先也是最重要的是，它允许您使用您已经熟悉的技术。不必被迫学习全新的编程语言，更不用说该语言所需的整个工具链，这会安全得多。它还可以轻松地将您当前的 Web 应用程序扩展到移动应用程序领域，而无需雇用专门的工程师。

除了这些原因之外，其他需要考虑的因素还有：

安全
是否开源免费(FLOSS)
Bundle 尺寸
性能
插件体系
自我更新器

3. 最小的 Tauri 移动应用程序

该应用是基于 2.0 Alpha 版本和 2.0 版本的早期文档。该实用程序的更新版本 create-tauri-app 正在开发中，以使以下许多步骤变得更加容易。话虽这么说，了解基础知识总是有帮助的！

3.1. 开发环境

首先，确保您已安装移动应用程序开发所需的所有先决条件。我正在 Mac 上工作并构建 iOS 应用程序，因此我按照此处的说明进行操作。如果您使用不同的操作系统或想要以 Android 为目标，则可以从这里开始。

现在我们已经准备好了开发环境，让我们开始安装 Tauri create-tauri-appRust 实用程序。这将使我们能够轻松初始化一个新的 Tauri 项目。我将要创建一个 Vue 项目并使用 TypeScript 开发。


cargo install create-tauri-app

cargo create-tauri-app

现在 cd 进入新创建的文件夹，并确保我们使用的是最新版本。首先，运行以下命令.

1	npm install @tauri-apps/cli@next @tauri-apps/api@next

这就是 Node 部分需要做的事情.现在 cd 进入该 src-tauri 文件夹并运行以下命令来更新 Rust 部分：

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"

我们已经准备好开发我们的移动应用程序了！要开发移动 Tauri 应用程序，前端必须在您的公共网络地址监听并提供服务。可以使用 internal-ip npm 包找到网络地址。您可以使用以下命令安装它：

1	npm install --save-dev internal-ip

4. 修改配置文件

接下来，我们需要更新该 vite.config.ts 文件。我正在使用 Vue，所以我的看起来像这样：

import { defineConfig } from "vite";
import { internalIpV4 } from "internal-ip";
import vue from "@vitejs/plugin-vue";

export default defineConfig(async () => {
  const host = await internalIpV4();

  /** @type {import('vite').UserConfig} */
  const config = {
    plugins: [vue()],
    // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
    // prevent vite from obscuring rust errors
    clearScreen: false,
    server: {
      host: "0.0.0.0", // listen on all addresses
      port: 5173,
      strictPort: true,
      hmr: {
        protocol: "ws",
        host,
        port: 5183,
      },
    },
    // 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,
    },
  };

  return config;
});

如果您使用不同的框架，请确保保留此文件中特定于框架的插件。

更新 tauri.conf.json, 这很重要！：

这里有两件事我们需要改变。第一，在 bundle 对象中添加以下对象，如下所示：

"bundle": {
      "active": true,
      "category": "DeveloperTool",
      "copyright": "",
      "deb": {
        "depends": []
      },
      "externalBin": [],
      "iOS": {
        "developmentTeam": "demo"
      },
      "icon": [

还要更改 Tauri 正在侦听的端口，使其与您的 JS 框架将运行的端口相匹配。就我而言，它是 5173. 像这样：

"build": {
   "beforeDevCommand": "npm run dev",
   "beforeBuildCommand": "npm run build",
   "devPath": "http://localhost:5173", <- Here
   "distDir": "../dist",
   "withGlobalTauri": false
 },

5. 修改 Rust 代码

现在配置文件已准备就绪，让我们对 Rust 文件进行一些更改。

src-tauri/Cargo.toml 更新如下：

1 2	[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>;

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

#[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(())
            })
            .invoke_handler(tauri::generate_handler![greet])
            .run(tauri::generate_context!())
            .expect("error while running tauri application");
    }
}

#[cfg(mobile)]
fn do_something() {
    println!("Hello from Mobile!");
}

#[cfg(desktop)]
fn do_something() {
    println!("Hello from Desktop!");
}

fn run() {
    if cfg!(mobile) {
        println!("Hello from Mobile!");
    } else {
        println!("Hello from Desktop!");
    }
}

创建一个新 src-tauri/src/mobile.rs 文件并添加以下内容：
1
2
3
4
#[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() {
// Change demo_mobile_app to the name of your app!
demo_mobile_app::AppBuilder::new().run();
}