Tauri项目中如何优雅地加载初始化JavaScript脚本

在Tauri项目开发过程中，我们经常需要加载外部网页作为应用界面。但有时我们还需要在这些网页中注入自定义的JavaScript脚本，以实现特定的功能或增强用户体验。本文将详细介绍在Tauri应用中加载初始化JavaScript脚本的几种方法。

传统方法的局限性

很多开发者首先想到的是使用eval()函数来执行JavaScript代码，这种方法虽然简单直接，但存在明显的缺点：

1. 代码只能执行一次，无法持久化
2. 安全性较差，容易受到注入攻击
3. 难以维护和调试

推荐的解决方案

Tauri提供了更优雅的方式来加载初始化脚本，主要通过WebviewWindowBuilder类实现。以下是具体实现步骤：

1. 修改tauri.conf.json配置

首先需要在配置文件中设置窗口创建方式为手动：

{
  "windows": [
    {
      "create": false,
      // 其他窗口配置...
    }
  ]
}

2. 使用Rust代码创建窗口

然后在Rust代码中手动创建窗口并注入初始化脚本：

use tauri::{WebviewWindowBuilder, Manager};

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      let window = WebviewWindowBuilder::from_config(app.handle(), app.config().windows[0].clone())
        .initialization_script("console.log('初始化脚本已加载');")
        .build()?;
      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("运行Tauri应用时出错");
}

3. 注入复杂脚本

对于更复杂的脚本，可以将其存储在单独的文件中，然后在运行时读取并注入：

let script_content = std::fs::read_to_string("path/to/script.js")?;
WebviewWindowBuilder::from_config(app.handle(), app.config().windows[0].clone())
  .initialization_script(&script_content)
  .build()?;

高级应用场景

动态脚本注入

可以根据不同条件动态生成或选择要注入的脚本：

let script = if cfg!(debug_assertions) {
  "console.log('调试模式');"
} else {
  "console.log('生产模式');"
};

WebviewWindowBuilder::from_config(app.handle(), app.config().windows[0].clone())
  .initialization_script(script)
  .build()?;

与前端框架集成

当使用React、Vue等前端框架时，可以通过初始化脚本设置全局变量或polyfill：

.initialization_script("
  window.__TAURI_ENV__ = {
    platform: '${TAURI_ENV_PLATFORM}',
    arch: '${TAURI_ENV_ARCH}',
    // 其他环境变量...
  };
")

注意事项

1. 初始化脚本会在页面加载前执行，确保不要依赖DOM元素
2. 脚本中的错误会阻止页面加载，需要妥善处理异常
3. 对于大型脚本，考虑使用模块化方式组织代码

通过以上方法，开发者可以灵活地在Tauri应用中加载初始化JavaScript脚本，既保证了代码的可维护性，又提高了应用的安全性。