Tauri2移动端开发和打包

Tauri2.0环境搭建与项目创建

节内容应该是本系列文章内容的第一篇，介绍如何搭建Tauri 2.0的开发环境，以及创建Tauri 2.0 的项目。

Tauri 2.0目前还处于Alpha测试阶段，目前有很多东西尚未完善，功能极少，但可以确定的是，2.0版本是支持跨端应用开发的，由于对Tauri期待比较高，已经迫不及待想要上手体验了，我其中踩到的坑以及解决思路会写到这，供大家参考。

对于 Tauri 2.0 ，如何创建项目是一个很困难的问题，官方没有提供任何文档，默认创建的项目就是1.X的版本，如果你想体验Tauri的最新特性，那么就需要自己探索了，一些Issue中提到过如何创建2.0项目，但是别那么多的Issue淹没了，因此这里要确定创建2.0项目的方法。（希望正式发布的时候会方便点）

Tauri 2.0 目前有个相当离谱的坑就是依赖问题，pnpm能解决js或ts的依赖问题，但是pnpm只能让依赖保持最新，并且还有缓存，寻找问题的原因变得极为困难，这就导致会出现一些莫名其妙的问题，因为Tauri版本与插件版本会出现不兼容问题。
本系列文章是非线性，一些要紧的内容会先发在前面，一些优先级比较低的内容会发在后面，最终会写一个目录帖告诉大家阅读顺序。（重要程序与优先级取决于我是否有空，以及是否有这样的例子。）

一、搭建 Tauri 2.0 开发环境

本教程默认你已经安装基本开发环境，如果你没有安装，请查看往期教程。

我当前的环境如下

软件	版本
Nodejs	v18.16.0
pnpm	任意
rust	1.70

由于Rust和Nodejs先前已有安装教程，这里就不多写了，本次只介绍安装Pnpm，Pnpm是一个更加好用的包管理工具，具体哪里好，建议百度一下，你就知道。安装较为简单

npm install pnpm -g

安装没有报错就说明安装成功。

二、创建 Tauri 2.0 项目

1.创建项目

Tauri 2.0 使用pnpm创建项目的命令如下

pnpm create tauri-app --alpha

官方也提供了其他方式创建项目，如果你有兴趣，可以去官网看看 ✈飞机票
执行那条命令，以下是输入的选项：

项目名：Tauri-Angular
前端语言：Typescript / JavaScript
包管理器：pnpm
UI模板：Angular
是否初始化移动端： y

以上是我翻译和操作的结果，你可以适当选择，或者直接使用和我一样的，具体效果如下图。

2.安装依赖

按照提示，应该是依次执行

cd tauri-angular
  pnpm install

4. 编译运行

接下来直接编译运行初始项目，看看效果

pnpm tauri dev

命令运行后有一个较长的编译过程

编译完成后，效果如下

三、设置开发环境

无论是Tauri还是Rust，官方都建议使用VSCode来进行开发，同时对其支持也是相当完善，因此使用VSCode做开发。安装好VSCode后，只需要安装以下安装插件

只要安装这三款插件即可

四、项目结构

当前项目文件结构如下

在当前目录中，需要关心的，基本上只有

src：Angular前端源文件夹
src-tauri：Rust后端源文件夹

至于其他的，都是程序自动维护的，最好不要手动更改。

这个部分取决于你使用的是哪种前端，但本质上，还是前端那些东西，就不再赘述了。

但有一点是值得注意的

此按钮功能的实现是前后端互动实现的，因此查其代码

此时查看后端文件

在代码框中，有以下两个函数

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

其中greet就是前端所调用的那个函数，而run是程序的入口，有以下需要注意的

.plugin(tauri_plugin_shell::init())注册了shell插件（必选）。
.invoke_handler(tauri::generate_handler![greet])注册了函数，使得前端可以调用。

也就是说，rust后端定义了command必须经过注册，前端才可以使用，代码编写顺序参考以上。

tauri的安卓开发环境配置和编译.apk

环境安装

参考官方说明：链接：https://next--tauri.netlify.app/next/guides/getting-started/prerequisites/windows

1.关于C++组件

bash

对于 Windows 用户，请确保至少安装了 Win10 SDK(10.0.19041.0) 和 Visual Studio Build Tools 2022（版本 17.2 或更高），此外还需要安装以下组件：

Microsoft Visual C++ 2015-2022 Redistributable (x64)
Microsoft Visual C++ 2015-2022 Redistributable (x86)
Microsoft Visual C++ 2012 Redistributable (x86)（可选）
Microsoft Visual C++ 2013 Redistributable (x86)（可选）
Microsoft Visual C++ 2008 Redistributable (x86)（可选）

2.Rust版本，最新稳定版即可，我已经升到1.70了。并且需要包含安卓的所有跨跨平台编译器。参考上面的链接就是需要运行这个命令了。

bash

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

3.Nodejs/npm/pnpm安装。nodejs选择最新的lts版本就好了，当前应该是18.12，npm装完nodejs自带就有。pnpm可以用npm安装。例如用这个命令：

bash

npm install -g pnpm

4.需要安卓Android Studio开发工具，安装最新版即可。

SDK安装：打开Android Studio，选择Tool-SDK Manager，然后安装你想要安装的SDK版本。以我为例，我的手机是安卓12，我想打包后的apk兼容安卓9-13，那就勾选完9-13的所有SDK，然后点击Apply即可开始下载（或许需要外网环境
NDK安装：打开Android Studio，选择Tool-SDK Manager，还是上面哪个界面，点击SDK Tools，需要安装Android SDK Build-Tools，NDK (Side by Side)，Android SDK Command Tools (Latest)，Cmake，Android Auto API Simulatros，Android Emulator（安卓模拟器），Android Emulator Hypervisor Driver (installer)，Android SDK Platform-Tools，Google USB Driver (谷歌USB驱动，用于adb调试），Google Web Driver(谷歌wifi驱动，用于adb wifi调试），Intel X86 Emulator Accelerator (HAXM installer)，然后点击Apply开始下载。
拷贝SDK路径：打开Android Studio，选择Tool-SDK Manager，还是上面哪个界面，将Android SDK Locations后面的路径拷贝一下，我的显示是：C:\Users\dsz\AppData\Local\Android\Sdk

5.环境设置。对于Win11：打开Windows设置-系统-系统信息-高级系统设置-环境变量。在用户环境，新建用户变量。下面是几个需要构建的变化。

变量名：ANDROID_HOME，变量值：C:\Users\dsz\AppData\Local\Android\Sdk 这个路径是从刚刚上一步拷贝而来的这个路径是从刚刚上一步拷贝而来的
变量名：JAVA_HOME，变量值：C:\Program Files\Android\Android Studio\jbr (这个路径需要根据你的Android Studio安装目录决定，我是默认安装位置，所以就是这个了。)
变量名：NDK_HOME，变量值：C:\Users\dsz\AppData\Local\Android\Sdk\ndk\25.2.9519653 （注意这个路径需要你去C:\Users\你的用户名\AppData\Local\Android\Sdk\ndk找找看，版本号不一定是我这个。
然后再找到用户变量的Path变量，选择编辑。
然后再新建三个路径（需要根据你的用户名找到对应的路径）：
C:\Program Files\Android\Android Studio\jbr\bin 这个提供了一些java运行命令以及最后apk签名的工具。
C:\Users\dsz\AppData\Local\Android\Sdk\platform-tools 这个下面提供了一些adb工具，可以用来控制你的手机安装软件。
C:\Users\dsz\AppData\Local\Android\Sdk\build-tools\34.0.0 这个下面是一些apk查看，编辑的工具，可以用来定位apk错误信息。
参考截图如下：
保存完环境变量后，需要验证一下。打开powershell。输入下面几个命令，如果没有提示找不到xxx，则说明ok。

bash

java --version
rustc --version
pnpm --version
adb --version
node --version
npm --version
pnpm --version
aapt
jarsigner --help
keytool --help

构建Demo（这步的文档更新了，忽略以下，可按最新tauri2的文档）

参考页面链接：https://next--tauri.netlify.app/next/guides/getting-started/setup/html-css-js

1.用pnpm创建Demo

bash

pnpm create tauri-app

填写信息参考：

bash

1. 我写的项目名是：tauri_demo
? Project Name: tauri_demo

2. 直接回车即可，默认是TypeScript/JavaScript
? Choose which language to use for your frontend
❯ TypeScript / JavaScript  (pnpm, yarn, npm)
  Rust

3. 直接回车即可，默认是pnpm
? Choose your package manager ›
❯ pnpm
  yarn
  npm
4. 直接回车即可，默认是Vanilla
? Choose your UI template
❯ Vanilla
  Vue
  Svelte
  React
  Solid
  Angular
5. 直接回车即可，默认是TypeScript
? Choose your UI flavor ›
❯ TypeScript
  JavaScript

2.用Vscode打开tauri_demo目录，然后终端运行下面的命令，安装web依赖，

bash

pnpm install

3.打开tauri_demo/src-tauri/pnpm.toml文件，可以看到目前该项目依赖是Tauri 1.4，而不是Tauri 2.0。

bash

[dependencies]
tauri = { version = "1.4", features = ["shell-open"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"

迁移项目到Tauri 2.0

由于目前tauri 2.0还是alpha状态，所以需要手动更新tauri 2.0。参考页面：https://next--tauri.netlify.app/next/mobile/development/configuration

1.进入到上面构建的tauri_demo目录，运行下面两个命令来升级tauri 2.0

升级pnpm中的tauri依赖

bash

pnpm update @tauri-apps/cli@next @tauri-apps/api@next

输出如下：

bash

Packages: +3 -3
+++---

dependencies:
- @tauri-apps/api 1.4.0
+ @tauri-apps/api 2.0.0-alpha.5

devDependencies:
- @tauri-apps/cli 1.4.0
+ @tauri-apps/cli 2.0.0-alpha.10

Progress: resolved 49, reused 18, downloaded 0, added 3, done

可以看到tauri版本从1.4升级到了2.0.0-alpha
再进入tauri_demo项目下面的src-tauri目录

bash

cd src-tauri

观察tauri github项目主页：https://github.com/tauri-apps/tauri
主页下面有一个表格，里面写了最新tauri版本。可以看到tauri最新版是v2.0.0-alpha.10，tauri-build最新版是v2.0.0-alpha.6，tauri-cli最新版是v2.0.0-alpha.10
运行下面的命令，来更新rust项目中需要的tauri版本。

bash

pnpm add tauri@2.0.0-alpha.10
pnpm add tauri-build@2.0.0-alpha.6 --build
pnpm install tauri-cli --version "^2.0.0-alpha"

第一条命令运行出错了，error: unrecognized feature for crate tauri: shell-open
需要将src-tauri/pnpm.toml中的features = ["shell-open"]去掉，然后重新运行第一条命令。
最后测试一下是否ok，如果没报错，说明是ok的。

bash

pnpm tauri android --help

我的输出如下：

bash

Android commands

Usage: pnpm tauri android [OPTIONS] <COMMAND>

Commands:
  init   Initializes a Tauri Android project
  open   Open project in Android Studio
  dev    Android dev
  build  Android build
  help   Print this message or the help of the given subcommand(s)

Options:
  -v, --verbose...  Enables verbose logging
  -h, --help        Print help
  -V, --version     Print version

2.升级完工具后，还需要升级一下代码。用Vscode打开项目tauri_demo。

3.修改一下端口和服务。打开项目根目录的vite.config.ts，里面有一段代码定义了端口：

bash

 server: {
    port: 1420,
    strictPort: true,
  },

但是我测试发现1420太小了，普通用户不能用这个端口，会报错，于是我改成了14200，顺便加上了host:0.0.0.0，改完后配置如下：

bash

server: {
    port: 14200,
    host: "0.0.0.0",
    strictPort: true,
  },

顺便将src-tauri/tauri.config.json下面的devPath的1420改成14200。改完长这样：

bash

"devPath": "http://localhost:14200",

然后发现src-tauri/tauri.config.json 中allowlist有波浪线提示，说这个属性无法解析，所以allow_list以及对应值都需要干掉。顺便将identityfier改成你的用户名，改完后长这样：

bash

{
  "build": {
    "beforeDevCommand": "pnpm dev",
    "beforeBuildCommand": "pnpm build",
    "devPath": "http://localhost:14200",
    "distDir": "../dist",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "tauri_demo",
    "version": "0.0.0"
  },
  "tauri": {
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.tauri.tlntin",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    },
    "security": {
      "csp": null
    },
    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "tauri_demo",
        "width": 800,
        "height": 600
      }
    ]
  }
}

4.根据这个链接：https://next--tauri.netlify.app/next/mobile/development/integrate，还需要做一些代码层面修改。

修改：src-tauri/pnpm.toml目录，末尾新增下面这段代码，让安卓可以使用静态/动态库。

toml

[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<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 内容如下：

cpp

#[tauri::mobile_entry_point]
fn main() {
  super::AppBuilder::new().run();
}

覆盖src-tauri/src/main.rs 内容如下：

rust

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

pub fn main() {
  app::AppBuilder::new().run();
}

模拟器调试和编译安卓APK

1.需要打开Android Studio的安卓模拟器或者adb命令连接你的手机，建议后者会更好一些。

可以用下面的adb命令查看当前电脑已经连接的设备。如果没有，则会运行项目时会自动打开虚拟机中的模拟器。

bash

adb devices

也可以去Android Studio，打开Tool-Device Manager查看你的虚拟机。如果虚拟机也么有，那就需要去Device Manage，点击Create创建一个了。

2.回到项目根路径，用tauri 2.0编译生成安卓代码

参考链接：https://next--tauri.netlify.app/next/mobile/development/mobile_workflow

bash

pnpm tauri android init

3.以dev环境运行安卓项目

运行后会依次编译��，��，安卓运行后会依次编译web tauri，安卓，此时手机/虚拟机会自动安装apk。你点击手机屏幕会电脑终端可以看到对应的调试信息。

bash

pnpm tauri android dev

你可以在src-tauri\gen\android\app\build\outputs\apk\arm64\debug路径看到这个apk，它的命名为app-arm64-debug.apk，大小为148M。

4.正式使用时，一般不需要那么多调试信息，而且也要缩减安装包大小

所以需要编译一下正式版应用。运行下面的命令即可编译正式版应用，可能需要2-5分钟。

bash

pnpm tauri android build

输出结果如下：

bash

See https://docs.gradle.org/8.0/userguide/command_line_interface.html#sec:command_line_warnings
    Finished 1 APK at:
        C:\Users\dsz\Documents\rust_web\tauri_demo\src-tauri/gen/android\app/build/outputs/apk/universal/release/app-universal-release-unsigned.apk

    Finished 1 AAB at:
        C:\Users\dsz\Documents\rust_web\tauri_demo\src-tauri/gen/android\app/build/outputs/bundle/universalRelease/app-universal-release.aab

可以看到生成了apk和aab两个安装包。
观察apk命名：app-universal-release-unsigned.apk有两个关键信息，universal代表多架构，unsigned代表未包含签名。
尝试将这个apk放到安卓手机安装，提示没有签名无法安装。
多架构说明还能精简一下，像手机一般用arm64就行了，多余的目前用不上。
目前要做的事情是先给apk签名。

5.生成签名

参考链接：https://next--tauri.netlify.app/next/guides/distribution/sign-android/

根据这个链接，我们需要先生成一个签名。对于windows，使用下面这个命令来生成(注意keystore里面的用户名改成你的，最好是全英语）。

bash

keytool -genkey -v -keystore C:\Users\dsz\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

注意口令千万记牢固了，否则要重新生成了，会影响到后期的上架应用商店问题。
参考输入

bash

输入密钥库口令:
再次输入新口令:
您的名字与姓氏是什么?
  [Unknown]:  Tlntin Deng
您的组织单位名称是什么?
  [Unknown]:  MyCompany
您的组织名称是什么?
  [Unknown]:  MyOrg
您所在的城市或区域名称是什么?
  [Unknown]:  GuangZhou
您所在的省/市/自治区名称是什么?
  [Unknown]:  GuangDong
该单位的双字母国家/地区代码是什么?
  [Unknown]:  CN
CN=Tlntin Deng, OU=MyCompany, O=MyOrg, L=GuangZhou, ST=GuangDong, C=CN是否正确?
  [否]:  Y

生成完签名后，还需要将签名应用到apk中，还是参考上面的链接。先建一个src-tauri/gen/android/key.properties文件。填入你的口令以及签名路径：

bash

storePassword=xxxxxxxxx
keyPassword=xxxxxxxxx
keyAlias=upload
storeFile=C:\\Users\\dsz\\upload-keystore.jks

修改src-tauri/gen/android/app/build.gradle.kts文件。基本修改内容就是参考链接里面说的。我这里不再废话了。修改完长这样：

bash

import java.util.Properties
import java.io.FileInputStream

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("rust")
}

val keyPropertiesFile = rootProject.file("key.properties")
val keyProperties = Properties()
keyProperties.load(FileInputStream(keyPropertiesFile))

android {
    compileSdk = 33
    namespace = "com.tauri.tauri_demo"
    defaultConfig {
        manifestPlaceholders["usesCleartextTraffic"] = "false"
        applicationId = "com.tauri.tauri_demo"
        minSdk = 24
        targetSdk = 33
        versionCode = 1
        versionName = "1.0"
    }

    signingConfigs {
       create("release") {
           keyAlias = keyProperties["keyAlias"] as String
           keyPassword = keyProperties["keyPassword"] as String
           storeFile = file(keyProperties["storeFile"] as String)
           storePassword = keyProperties["storePassword"] as String
       }
    }

    buildTypes {
        getByName("debug") {
            manifestPlaceholders["usesCleartextTraffic"] = "true"
            isDebuggable = true
            isJniDebuggable = true
            isMinifyEnabled = false
            packaging {                jniLibs.keepDebugSymbols.add("*/arm64-v8a/*.so")
                jniLibs.keepDebugSymbols.add("*/armeabi-v7a/*.so")
                jniLibs.keepDebugSymbols.add("*/x86/*.so")
                jniLibs.keepDebugSymbols.add("*/x86_64/*.so")
            }
        }
        getByName("release") {
            isMinifyEnabled = true
            signingConfig = signingConfigs.getByName("release")
            proguardFiles(
                *fileTree(".") { include("**/*.pro") }
                    .plus(getDefaultProguardFile("proguard-android-optimize.txt"))
                    .toList().toTypedArray()
            )
        }
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

rust {
    rootDirRel = "../../../"
}

dependencies {
    implementation("androidx.webkit:webkit:1.6.1")
    implementation("androidx.appcompat:appcompat:1.6.1")
    implementation("com.google.android.material:material:1.8.0")
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.4")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.0")
}

apply(from = "tauri.build.gradle.kts")

在项目根目录，终端环境下，重新运行一次编译命令。

bash

pnpm tauri android build

输出结果如下：

bash

See https://docs.gradle.org/8.0/userguide/command_line_interface.html#sec:command_line_warnings
    Finished 1 APK at:
        C:\Users\dsz\Documents\rust_web\tauri_demo\src-tauri/gen/android\app/build/outputs/apk/universal/release/app-universal-release.apk

    Finished 1 AAB at:
        C:\Users\dsz\Documents\rust_web\tauri_demo\src-tauri/gen/android\app/build/outputs/bundle/universalRelease/app-universal-release.aab

可以看到文件没有提示未签名（unsigned）了。

6.精简架构（可选），观察一下目前apk的信息（注意路径改成你的）。

bash

aapt dump badging C:\Users\dsz\Documents\rust_web\tauri_demo\src-tauri/gen/android\app/build/outputs/apk/universal/release/app-universal-release.apk

输出结果：

bash

native-code: 'arm64-v8a' 'armeabi-v7a' 'x86' 'x86_64

可以看到目前有4种架构，分别是arm 64位/arm 32位，x86 32位，x86 64位，一般来说，我们手机都是arm架构，除非用电脑模拟器，否则只需要arm64就行。
获取编译安卓时的帮助信息

bash

pnpm tauri android build --help

输出结果：

bash

Android build

Usage: pnpm tauri android build [OPTIONS]

Options:
  -d, --debug                     Builds with the debug flag
  -v, --verbose...                Enables verbose logging
  -t, --target [<TARGETS>...]     Which targets to build (all by default) [possible values: aarch64, armv7, i686, x86_64]
  -f, --features [<FEATURES>...]  List of pnpm features to activate
  -c, --config <CONFIG>           JSON string or path to JSON file to merge with tauri.conf.json
      --split-per-abi             Whether to split the APKs and AABs per ABIs
      --apk                       Build APKs
      --aab                       Build AABs
  -o, --open                      Open Android Studio
  -h, --help                      Print help
  -V, --version                   Print version

注意：-t, --target [<TARGETS>...] Which targets to build (all by default) [possible values: aarch64, armv7, i686, x86_64] 这里说all by default，默认是4种架构都支持，我们需要arm64，所以就选aarch64即可。
于是下面编译正式版时，指定一下架构aarch64。在项目根目录，终端环境下，重新运行一次编译命令。

bash

pnpm tauri android build --target aarch64

观察输出结果，命名好像没有变化，还是通用架构，已签名。

bash

See https://docs.gradle.org/8.0/userguide/command_line_interface.html#sec:command_line_warnings
    Finished 1 APK at:                                                                                                                                                                             
        C:\Users\dsz\Documents\rust_web\tauri_demo\src-tauri/gen/android\app/build/outputs/apk/universal/release/app-universal-release.apk                                                         

    Finished 1 AAB at:
        C:\Users\dsz\Documents\rust_web\tauri_demo\src-tauri/gen/android\app/build/outputs/bundle/universalRelease/app-universal-release.aab

观察一下新apk安装包的信息：

bash

aapt dump badging C:\Users\dsz\Documents\rust_web\tauri_demo\src-tauri/gen/android\app/build/outputs/apk/universal/release/app-universal-release.apk

输出结果：

bash

native-code: 'arm64-v8a

目前只支持单一架构了。文件名大小从38M到11M，减少了70%多。
然后把这个安装包发到手机上，就可以安装了。如果提示签名不一致，那就卸载一下旧版。

7.安装后打开长这样：

环境配置2

文档

配置文档：移动端配置

能力：https://beta.tauri.app/zh-cn/concepts/security/capabilities/#target-platform

访问控制列表

1.安装AndroidStudio以及对应版本(可以是其他版本，但路径要对应)

bash

安装Android Sdk Platform 34
安装Android SDK Platform-Tools
安装NDK (Side by side) 26.0.10792818
安装Android SDK Build-Tools 34.0
安装Android SDK Command-line Tools

2.配置环境变量(建议直接配置在系统环境)

bash

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

#这里根据具体路径进行设置
[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\26.0.10792818", "User")

3.初始化tauri文件(这里对非安卓同样有效)

运行命令

bash

pnpm tauri init    #找一个空文件夹初始化tauri项目(建议先配前端，他可以自动分析)

# Where are your web assets：如果是标准项目../src目录即可，如果是vite配置../dist
# What is the URL of your dev server?： 如果是vite，http://localhost:%vite端口%。否则src目录即可
# What is your frontend dev command?：如果是vite，则为npm run dev，否则空
# What is your frontend build command? ：如果是vite，则为npm run build，否则空

配置好后修改tauri.conf.json的identifier

4.初始化tauri安卓环境

bash

pnpm tauri android init    # 初始化安卓项目
pnpm tauri android open    # 通过android studio打开安卓项目(会自动下载gradle环境)

5.额外需要配置的东西

配置powershell开发者模式

bash

# Windows启动开发者模式
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock" /t REG_DWORD /f /v "AllowDevelopmentWithoutDevLicense" /d "1"

6.运行

bash

pnpm tauri dev # 测试
pnpm tauri build   # 构建
pnpm tauri android dev     # 测试安卓
pnpm tauri android build   # 构建安卓

7.vite配置(额外)

bash

npm install --save-dev internal-ip

配置vite.config.js

import { defineConfig } from 'vite'
import { internalIpV4 } from 'internal-ip'

// https://vitejs.dev/config/
export default defineConfig(async () => {
  const host = await internalIpV4()

  /** @type {import('vite').UserConfig} */
  const config = {
    server: {
      host: '0.0.0.0', // listen on all addresses
      port: 5173,
      strictPort: true,
      hmr: {
        protocol: 'ws',
        host,
        port: 5183,
      },
    },
  }

  return config
})

8.修改配置用来发布

链接

json

"bundle": {
  "active": true,    #这个直接true就行，代表绑捆的应用，跟targets挂钩
  "category": "类型",
  "copyright": "软件协议",
  "identifier": "唯一标识符",
  "longDescription": "长介绍",
  "shortDescription": "短介绍",
  "publisher": "发布者",
},

9.对发布后的apk进行签名

bash

#创建签名，接下来签名密码要记住
keytool -genkey -v -keystore 密钥存储位置 -alias 密钥别名(一般和密钥一样就行) -keyalg RSA -validity 30000(持续时间)

#用apksigner进行签名
apksigner sign --ks (签名地址) --ks-key-alias (别名) --out (签名后的apk地址) (待签名apk地址)

#进行验证
apksigner verify -v --print-certs (apk地址)

#修改对齐(如果安装报对齐错误再使用)
zipalign -c -v 4 existing.apk #查看应用对齐方式
zipalign -p -f -v 4 infile.apk outfile.apk  #修改对齐(直接用这个即可，上面这个是输出信息的)

开启远程调试功能

本节内容为使用Tauri App使用远程调试功能，借助PageSpy提供的强大功能，Tauri可以很方便的调试自己的App，除断点调试无法实现外，抓包，元素审查，查看localstorage以及查看系统特性等功能都是可以使用的，基本可以满足调试要求，并且接入相当简单，推荐大家在使用Tauri调试移动端时使用。（比如安卓，tauri是可以读logcat的，但是总是会输出一些无关信息，影响开发效率，还是这种Chrome开发这工具的更方便，但logcat你也得学会看，这只是方不方便的区别）

一、搭建PageSpy环境

第一步先搭建PageSpy环境，首先找官方仓库，你只要在Github搜 page-spy-web 就可以了，当然也可以直接使用我的命令，前提是得有docker或者podman。

# docker 部署
docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release
# podman 部署
podman run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release

你也可以使用Node来部署

bash

yarn global add @huolala-tech/page-spy-api
# 如果你使用 npm
npm install -g @huolala-tech/page-spy-api

安装完只要命令行运行page-spy-api启动服务，然后访问ip:6752就可以了。

打开页面显示

二、接入SDK

点击接入SDK就会出现

然后在Tauri的src目录下（前端目录），找到index.html，添加这些内容

html

<script crossorigin="anonymous" src="http://localhost:6752/page-spy/index.min.js"></script>
<script>
   window.$pageSpy = new PageSpy();
</script>

localhost换成你的远程地址才可用

三、进行远程调试

此时运行你的项目，会出现一个logo

表明已经连接到远程调试了，然后在PageSpy的Web页面进入房间页面，就会有你的设备

选中你的设备调试即可。

能做Tauri开发说明你已经是个老玩家了，这个界面会相当熟悉，新手也不用慌，可以F12玩玩你的开发者工具。

调试控制台

控制台查看调试输出的内容，以及进行一些js命令的运行。

网络抓包

抓取请求响应，调试必备。

审查元素

四、延伸

PageSpy功能很强大，基本上，利用Webview来实现跨端App的，都可以拿来调试，如果开发工具没有像Uniapp一样自带真机调试功能，使用这种远程调试还是很值得的，而且想要去除也是相当容易。

使用Barcode Scanner实现扫码功能（安卓）

首先，本节内容是假设你已经会使用Tauri2.0搭建移动端项目，并且你的App需要添加一个扫码功能，如果你正对此出现的各种离谱问题，比如Rust插件依赖装不上，好不容易装上依赖但是又出现App闪退等问题，那么看这篇文章就对了，哪怕你第一次接触Tauri，学习一下也是好的。

关于Tauri系列的其他内容在后面几天将陆续更新，本节首先发布是因为这个问题比较紧急。后面会从Tauri2.0移动端框架的搭建，调试等方面做点介绍，旨在大家能真实的用上Tauri，它不是个花架子。

一、Barcode Scanner插件

Tauri2.0当前还处于Alpha测试阶段，一些内容尚未发布，且不稳定。但是一些功能已经可以使用了，比如扫码。（还有个Deep Linking后续聊）它的文档是严重落后与开发的，而且开发也极其缓慢，半年就更新出个扫码功能，而且还一堆破Bug，我这里只是将就写写，内容供大家参考。

二、使用步骤

1.安装插件

安装要求

该插件安装分为两部分：

Rust后端插件
前端插件

在安装之前，需要明确，检查你的环境是否正确，如果不正确，就会出现插件安装失败，或者插件安装不上。

需要Rust至少1.64版本，直接用最新的1.70+版本，如果你的不够请更新。
需要明确你使用的前端包管理工具，支持pnpm，npm和yarn，我使用的是pnpm。

最后一个必须检查的问题，就是你项目使用的tauri版本，不能使用最新的alpha.18版本，会有依赖冲突，表现为shell这个库爆红。

解决方案
将你的Tauri版本改为alpha.13

如果你按照这个方式修改了但是仍然出现闪退问题，就将pnpm.lock改回去，直到能运行不闪退，然后将你的Tauri版本改为alpha.13，重新构建，就可以解决问题了。解决插件装不上和闪退问题。

安装Rust后端插件

github提供的写法是

bash

[dependencies]
tauri-plugin-barcode-scanner = "2.0.0-alpha"
# 使用git源:
tauri-plugin-barcode-scanner = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }

如果你真的这么写，那么你必然踩坑。我怀疑这段文字是使用机器生成的，因为所有插件都是这么写的，但是看他的example里却不是这么用的，推荐使用以下写法

bash

[target."cfg(any(target_os = \"android\", target_os = \"ios\"))".dependencies]
tauri-plugin-barcode-scanner = "2.0.0-alpha.2"

注意
不要使用pnpm来更新依赖，使用pnpm clean以后，使用tauri的命令让他自己跑，就不会报错了。

安装前端插件

此部分内容，只要按照你的包管理工具安装即可，选任意一个

bash

pnpm add @tauri-apps/plugin-barcode-scanner
# or
npm add @tauri-apps/plugin-barcode-scanner
# or
yarn add @tauri-apps/plugin-barcode-scanner
# alternatively with Git:
pnpm add https://github.com/tauri-apps/tauri-plugin-barcode-scanner#v2
# or
npm add https://github.com/tauri-apps/tauri-plugin-barcode-scanner#v2
# or
yarn add https://github.com/tauri-apps/tauri-plugin-barcode-scanner#v2

2.使用

使用如果没有出现问题会相当简单，如果你是按照我给的流程来安装的话。

注册插件

在main.rs中注册插件就行，如果爆红，就看上面

rust

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_barcode_scanner::init())// 添加这行
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

调用扫码功能

导入包

import { scan } from "@tauri-apps/plugin-barcode-scanner";

然后直接调用即可

scan({ 
    windowed: false, 
    formats: [Format.QRCode] 
    }).then(resp => {
          console.log(`响应内容: ${resp.content}`);
        })

如果你想要更加详细的了解，那么主要注意的有

resp是Scanned类型的，他的定义为

export interface Scanned {
    content: string;
    format: Format;
    bounds: unknown;
}

扫码的类型是可以定义的，也就是Format

export declare enum Format {
    QRCode = "QR_CODE",
    UPC_A = "UPC_A",
    UPC_E = "UPC_E",
    EAN8 = "EAN_8",
    EAN13 = "EAN_13",
    Code39 = "CODE_39",
    Code93 = "CODE_93",
    Code128 = "CODE_128",
    Codabar = "CODABAR",
    ITF = "ITF",
    Aztec = "AZTEC",
    DataMatrix = "DATA_MATRIX",
    PDF417 = "PDF_417"
}

摄像头也是可以指定的，相关代码为

export interface ScanOptions {
    cameraDirection?: "back" | "front";
    formats?: Format[];
    windowed?: boolean;
}

Tauri2移动端开发和打包 ​

Tauri2.0环境搭建与项目创建 ​

一、搭建 Tauri 2.0 开发环境 ​

二、创建 Tauri 2.0 项目 ​

1.创建项目 ​

2.安装依赖 ​

4. 编译运行 ​

三、设置开发环境 ​

四、项目结构 ​

tauri的安卓开发环境配置和编译.apk ​

环境安装 ​

构建Demo（这步的文档更新了，忽略以下，可按最新tauri2的文档） ​

迁移项目到Tauri 2.0 ​

模拟器调试和编译安卓APK ​

1.需要打开Android Studio的安卓模拟器或者adb命令连接你的手机，建议后者会更好一些。 ​

2.回到项目根路径，用tauri 2.0编译生成安卓代码 ​

3.以dev环境运行安卓项目 ​

4.正式使用时，一般不需要那么多调试信息，而且也要缩减安装包大小 ​

5.生成签名 ​

环境配置2 ​

文档 ​

1.安装AndroidStudio以及对应版本(可以是其他版本，但路径要对应) ​

2.配置环境变量(建议直接配置在系统环境) ​

3.初始化tauri文件(这里对非安卓同样有效) ​

Tauri2移动端开发和打包

Tauri2.0环境搭建与项目创建

一、搭建 Tauri 2.0 开发环境

二、创建 Tauri 2.0 项目

1.创建项目

2.安装依赖

4. 编译运行

三、设置开发环境

四、项目结构

tauri的安卓开发环境配置和编译.apk

环境安装

构建Demo（这步的文档更新了，忽略以下，可按最新tauri2的文档）

迁移项目到Tauri 2.0

模拟器调试和编译安卓APK

1.需要打开Android Studio的安卓模拟器或者adb命令连接你的手机，建议后者会更好一些。

2.回到项目根路径，用tauri 2.0编译生成安卓代码

3.以dev环境运行安卓项目

4.正式使用时，一般不需要那么多调试信息，而且也要缩减安装包大小

5.生成签名

环境配置2

文档

1.安装AndroidStudio以及对应版本(可以是其他版本，但路径要对应)

2.配置环境变量(建议直接配置在系统环境)

3.初始化tauri文件(这里对非安卓同样有效)