什么是陶里？
Tauri是使用HTML，CSS和JavaScript等Web技术构建跨平台桌面应用程序的开源框架。
Tauri一直在现场，被认为是沿Flutter构建桌面应用程序的最佳选择之一，但尚未进行移动开发！
现在一个新时代开始了ð！ Tauri现在能够使用相同的代码库，用于移动的应用程序构建。通过本文，我将帮助您配置一个为Android设备构建的项目。
我的环境
出于本文的目的，我将使用：
- MacBook Pro M1 ARM与MacOS Ventura 13.2
- fish shell和Homebrew安装的终端
- 在Android 12上运行的Android设备
移动公牛
在Tauri Blog上，他们宣布了Tauri Mobile的Alpha发行。在本文中，我将帮助您使用它创建第一个应用程序！让我们潜入！ ðâ€
Android先决条件
Java开发套件（JDK）
为了构建我们的Android应用程序，我们需要首先安装JDK。再一次，随意选择适合您的操作系统的一个。
Android SDK
当我们为Android构建应用程序时，我们需要Android SDK工具。它将帮助我们构建和测试Android应用程序，并将完成的应用发布到Google Play商店或其他应用程序市场上。
安装它的最简单方法是下载Android Studio。前往他们的网站ð，然后单击Download按钮。单击协议按钮，然后为您的计算机选择正确的版本，例如，我已经下载了带有Apple芯片的Mac的版本。
完成下载后，通过双击文件来安装它。保留所有默认选项，并在软件询问您时下载最新的SDK。为了确保一切正常，让我们打开settings，该settings由open按钮旁边的三个点按钮表示，然后选择SDK Manager。
您应该看到这样的东西：
，如果尚未安装与Android设备相对应的一个。然后，我们将转到SDK Tools选项卡，然后选择：
- Android SDK命令行工具（最新）
- ndk（并排）
- Android SDK Build-Tools
- Android SDK平台工具
然后单击Apply按钮。
现在我们已经这样做了，我们现在可以关闭Android Studio。
环境变量
现在我们需要指定一些环境变量。请随时在互联网上搜索如何为您的操作系统做。
就我而言，我使用的是带有鱼壳的Mac（如果您有兴趣ð我可以写一篇文章），以便我的命令是code ~/.config/fish/config.fish添加环境变量。我的文件将是这样：
if status is-interactive
# Commands to run in interactive sessions can go here
end
if status --is-login
set -gx ANDROID_SDK_ROOT $HOME/Library/Android/sdk
set -gx NDK_HOME $HOME/Library/Android/sdk/ndk/25.1.8937393
end
执行此操作后，我建议您关闭终端并打开一个新的终端以启用更改。
您可以看到，我添加了这两个变量：ANDROID_SDK_ROOT and NDK_HOME。根据您的路径更改这些值。
仍然关注？我知道这可能会令人沮丧地做所有这些配置，但请相信我，美好的日子即将到来！现在我们已经完成了特定于Android的配置，让我们安装taurið¥µ
将陶里安装用于手机
先决条件
tauri documentation已经足够清楚，可以在没有任何额外帮助的情况下相处。
为移动开发准备陶里
请前往他们的documentation准备工作空间，因为我认为它已经清晰易于开始。
创建您的应用程序
从这里开始，我要您仔细跟随以避免迷路。
让我们从创建一个简单的Vite应用程序开始：
> pnpm create vite
您将被询问一些信息：
- 您项目的名称（我选择了“ Taurituto”）
- 您将使用的框架（我选择与Typescript进行反应）
使用
安装所需的软件包
> pnpm i
您应该拥有与此类似的东西：
如果您熟悉Vite Apps，没什么特别的。
让我们在添加我们的Tauri应用之前进行一些配置。
快速配置
由于Tauri将在我们的移动应用程序上运行此Vite应用程序，因此我们需要进行设置，以便它可以使用计算机端口和IP地址显示我们的内容。
让我们现在看看我们现在在vite.config.ts文件中得到的东西：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
如此documentation上提到的，我们需要更改此文件，以便将VITE运行到移动应用程序中。首先，我们需要安装internal-ip，您知道钻头：
pnpm i -D internal-ip
并更改我们的vite.config.ts来使用它：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { internalIpV4 } from 'internal-ip'
// https://vitejs.dev/config/
export default defineConfig(async () => {
const host = await internalIpV4();
return {
// prevent vite from obscuring rust errors
plugins: [react()],
clearScreen: false,
server: {
host: '0.0.0.0', // listen on all addresses
port: 5173,
// Tauri expects a fixed port, fail if that port is not available
strictPort: true,
hmr: {
protocol: 'ws',
host,
port: 5183
},
},
// to make use of `TAURI_PLATFORM`, `TAURI_ARCH`, `TAURI_FAMILY`,
// `TAURI_PLATFORM_VERSION`, `TAURI_PLATFORM_TYPE` and `TAURI_DEBUG`
// env variables
envPrefix: ['VITE_', 'TAURI_'],
build: {
// Tauri supports es2021
target: ['es2021', 'chrome100', 'safari13'],
// don't minify for debug builds
minify: 'esbuild',
// produce sourcemaps for debug builds
sourcemap: 'inline',
}
}
})
好吧，现在我们准备添加陶里应用程序零件！
添加陶里
让我们添加Tauri CLI，因为它将帮助我们与Vite App一起安装Tauri应用程序：
> pnpm add -D @tauri-apps/cli
现在我们已经安装了它，运行：
> pnpm tauri init
除了您回答一堆问题外，它将：
> ? What is your app name? <yourappname>
> ? What should the window title be? <you can leave it the same as your app name>
> ? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? ../dist
> ? What is the url of your dev server? › http://localhost:5173
> ? What is your frontend dev command? › pnpm run dev
> ? What is your frontend build command? · pnpm run build
现在，您应该将一个称为 src-tauri 的文件夹作为项目的根。
然后导航到 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文件，然后添加以下行：
[package]
name = "snapchat"
version = "0.0.0"
description = "A Tauri App"
authors = ["you"]
license = ""
repository = ""
edition = "2021"
[lib]
crate-type = ["staticlib", "cdylib", "rlib"]
...
现在，在同一级别上进入您的 src 文件夹，并与这些行添加2个文件lib.rs和mobile.rs：
// 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");
}
}
// mobile.rs
#[tauri::mobile_entry_point]
fn main() {
super::AppBuilder::new().run();
}
然后替换我们的main.rs文件以使用 appbuilder struct：
//main.rs
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
pub fn main() {
app::AppBuilder::new().run();
}
现在，我们准备启动我们的Android项目。让我们运行回到我们的根项目并运行以下操作：
pnpm update @tauri-apps/cli@next @tauri-apps/api@next && pnpm run tauri android init
使用此命令，CLI工具将为我们做一些配置，所以让我们坐下来等待它完成ð§
- 当CLI完成后，转到 src-tauri ，您现在应该看到一个称为的文件夹，带有一些其中的文件。这意味着该工具已正确生成了您的Android项目ð。
在我们在设备上运行它之前，最后一件事。在src-tauri中打开tauri.conf.json文件，然后将束标识符更改为此模式com.$developeralias.$appname之后的自定义标识符。例如，对我来说，我将其更改为：com.yourname.appname。
好吧，现在让我们运行我们的应用ð，运行命令：pnpm run tauri android dev [--open]
该命令将尝试在Android Emulator上启动我们的应用程序，如果找不到它，它将为您打开Android Studio。就我而言，我想在我的真实设备上运行它，所以我将等待Android Studio弹出。
我必须在build.gradle.kts文件中更改此行才能匹配我的配置：
// Change this
implementation("com.android.tools.build:gradle:7.3.1")
To this
implementation("com.android.tools.build:gradle:7.2.1")
â！
测试
是时候运行我们的应用了！如您所见，它打开了Android Studio，并完美地检测到了我的设备。只需继续单击“运行应用程序”按钮，然后等待应用程序运行。
如果该应用程序不首次运行，请尝试关闭Android Studio并重新运行命令：
> pnpm tauri android dev [--open]
是的！ ðð
现在尝试更改 src/app.tsx 内的东西并保存。更改直接考虑并更新您的应用程序！ ð？g©
当Tauri使用您喜欢的框架加载时，您可以使用我们喜欢的工具！
您也可以通过执行此命令来构建应用程序：
> pnpm tauri android build
最后一句话
tauri的移动设备仍在alpha release中，因此我不建议在生产中使用它，但我认为它已经很酷了。下次，我们将讨论与Rust和移动插件的互动！ ð
让我知道您是否要我做更多的教程！ ð
感谢您坚持我直到最后！看你们！ ð