Dioxus框架中移动应用（Mobile App）

拔萝卜的Tank
569 阅读4分钟

移动应用

使用Dioxus构建移动应用！

支持

移动设备目前是Dioxus支持程度最低的渲染器目标。移动应用使用平台的WebView或实验性地使用WGPU进行渲染。WebView不支持动画、透明度和原生控件。

移动支持目前最适合CRUD风格的应用，理想情况下是内部团队需要快速开发，但不太关心动画或原生控件。

开始设置

开始使用移动设备可能会相当具有挑战性。这里的工具还不够完善（尚未），可能需要一些调整才能使事情正常工作。

设置依赖项

Android

首先，安装Rust Android目标：

rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android

要开发Android应用，你需要安装Android Studio。

安装Android Studio后，你需要安装Android SDK和NDK：

  1. 创建一个空白的Android项目
  2. 选择Tools > SDK manager
  3. 导航到SDK tools窗口：

img

然后选择：

  • SDK
  • SDK命令行工具
  • NDK（并行）
  • CMAKE
  1. 选择apply并按照提示操作

更多可能有助于调试你遇到的错误的详细信息，请参考官方Android文档

接下来设置Java、Android和NDK的home变量：

Mac：

export JAVA_HOME="/Applications/Android Studio.app/Contents/jbr/Contents/Home"
export ANDROID_HOME="$HOME/Library/Android/sdk"
export NDK_HOME="$ANDROID_HOME/ndk/25.2.9519653"

Windows：

[System.Environment]::SetEnvironmentVariable("JAVA_HOME", "C:\Program Files\Android\Android Studio\jbr", "User")
[System.Environment]::SetEnvironmentVariable("ANDROID_HOME", "$env:LocalAppData\Android\Sdk", "User")
[System.Environment]::SetEnvironmentVariable("NDK_HOME", "$env:LocalAppData\Android\Sdk\ndk\25.2.9519653", "User")

路径中的NDK版本应与你在上一步中安装的版本相匹配

IOS

要在IOS上开发，你需要安装Xcode。

如果你使用的是M1芯片，如果你想在模拟器上运行，你需要运行cargo build --target x86_64-apple-ios而不是cargo apple build。

设置你的项目

首先，我们需要创建一个Rust项目：

cargo new dioxus-mobile-test --lib
cd dioxus-mobile-test

接下来，我们可以使用cargo-mobile2为移动设备创建一个项目：

cargo install --git https://github.com/tauri-apps/cargo-mobile2
cargo mobile init

当你运行cargo mobile init时，你会被问到一系列关于你的项目的问题。其中一个问题是你应该使用哪个模板。Dioxus目前在Tauri移动设备中没有模板，相反，你可以使用wry模板。

你可能还会被要求输入你的IOS团队ID。你可以在这里找到你的团队ID，或者通过在这里创建一个开发者账户来创建一个团队ID。

接下来，我们需要修改我们的依赖项以包含dioxus，并确保安装了正确版本的wry。更改你的Cargo.toml中的[dependencies]部分：

[dependencies]
anyhow = "1.0"
log = "0.4"
wry = "0.37"
tao = "0.26"
dioxus = { version = "0.6", features = ["mobile"] }

最后，我们需要添加一个组件来渲染。用以下代码替换你的lib.rs文件中的wry模板：

// ...（此处省略了代码，以避免过长）

pub fn main() -> Result<()> {
    init_logging();

    launch(app);

    Ok(())
}

// ...（此处省略了代码，以避免过长）

运行

从那里，你将希望使用你的目标平台（模拟器或实际硬件）构建crate。现在，我们只使用模拟器。

首先，你需要确保Android Studio中的构建变体是正确的：

  1. 点击顶部菜单栏中的"Build"。
  2. 点击下拉菜单中的"Select Build Variant..."。
  3. 找到"Build Variants"面板，并使用下拉菜单更改所选的构建变体。

imgimg

Android

在Android上构建你的项目，你可以运行：

接下来，打开Android Studio：

这将为这个应用打开一个Android Studio项目。

接下来，我们需要在Android Studio中创建一个模拟器来运行我们的应用。要创建一个模拟器，点击Android Studio右上角的电话图标：

img

然后点击create a virtual device按钮并按照提示操作：

img

最后，通过点击你创建的设备上的播放按钮来启动你的设备：

img

现在你可以通过在终端运行以下命令来启动你的应用：

更多信息可以在Android文档中找到：

IOS

要为IOS构建你的项目，你可以运行：

cargo build --target aarch64-apple-ios-sim

接下来，打开Xcode（如果你以前从未打开过Xcode，这可能需要一段时间）：

这将在XCode中打开这个特定项目的项目。

从那里，只需点击右侧目标的“运行”按钮，应用就应该开始运行了！

请注意，点击播放不会触发新的构建，所以你需要在更改之间不断重新构建应用。这里的工具非常新，所以请耐心等待。如果你想贡献使事情变得更容易，请尽管去做！我们会很高兴帮助你。

希望这个翻译对你有所帮助！如果你有任何问题或需要进一步的解释，请随时告诉我。

avatar
文章
阅读
粉丝