桌面端 API

注意

使用桌面端 API 的前提是在更多配置中，开启全局 TauriApi，然后才可以打包发布使用！

桌面端 API 主要是集成了 tauri2 的所有 api 接口，还有 PakePlus 自定义的一些 api 接口，一定要开启全局 TauriApi，然后才可以打包发布使用，否则不生效的。开发过程中，可以通过 window.TAURI 来查看有哪些 api 接口，并可以查看接口类型。

JS 脚本中使用

  1. // core
  2. const {
  3.     addPluginListener,
  4.     invoke,
  5.     Channel,
  6.     checkPermissions,
  7.     convertFileSrc,
  8.     isTauri,
  9.     PluginListener,
  10.     requestPermissions,
  11.     Resource,
  12.     transformCallback,
  13.     SERIALIZE_TO_IPC_FN,
  14. } = window.__TAURI__.core
  16. // app
  17. const {
  18.     defaultWindowIcon,
  19.     fetchDataStoreIdentifiers,
  20.     getIdentifier,
  21.     getName,
  22.     getTauriVersion,
  23.     getVersion,
  24.     hide,
  25.     removeDataStore,
  26.     setDockVisibility,
  27.     setTheme,
  28.     show,
  29. } = window.__TAURI__.app
  31. // event
  32. const { emit, emitTo, listen, once } = window.__TAURI__.event
  34. // dpi
  35. const {
  36.     LogicalPosition,
  37.     LogicalSize,
  38.     PhysicalPosition,
  39.     PhysicalSize,
  40.     Position,
  41.     Size,
  42. } = window.__TAURI__.dpi
  44. // image
  45. const { Image, transformImage } = window.__TAURI__.image
  47. // menu
  48. const {
  49.     CheckMenuItem,
  50.     IconMenuItem,
  51.     itemFromKind,
  52.     Menu,
  53.     MenuItem,
  54.     NativeIcon,
  55.     PredefinedMenuItem,
  56.     Submenu,
  57. } = window.__TAURI__.menu
  59. // path
  60. const {
  61.     appDataDir,
  62.     appConfigDir,
  63.     appLocalDataDir,
  64.     appCacheDir,
  65.     appLogDir,
  66.     audioDir,
  67.     cacheDir,
  68.     configDir,
  69.     dataDir,
  70.     desktopDir,
  71.     documentDir,
  72.     downloadDir,
  73.     executableDir,
  74.     fontDir,
  75.     homeDir,
  76.     pictureDir,
  77.     publicDir,
  78.     resourceDir,
  79.     runtimeDir,
  80.     templateDir,
  81.     videoDir,
  82.     sep,
  83.     delimiter,
  84.     basename,
  85.     dirname,
  86.     extname,
  87.     join,
  88.     normalize,
  89.     resolve,
  90.     isAbsolute,
  91.     localDataDir,
  92.     resolveResource,
  93.     tempDir,
  94. } = window.__TAURI__.path
  96. // 调用新建窗口等函数
  97. const { WebviewWindow } = window.__TAURI__.webviewWindow
  99. // 等等接口，请参考Tauri2官方文档：https://v2.tauri.app/reference/javascript/api/#vanilla-js-api

Vue/React/Next/等使用

  1. // 安装依赖，就可以支持类型提示等
  2. // core api
  3. pnpm install @tauri-apps/api
  5. // dialog api
  6. pnpm install @tauri-apps/plugin-dialog
  8. // fs api
  9. pnpm install @tauri-apps/plugin-fs
  11. // os api
  12. pnpm install @tauri-apps/plugin-os
  14. // 等等接口，请参考Tauri2官方文档：https://v2.tauri.app/reference/javascript/api/#vanilla-js-api

Tauri2Api

文档待更新……

Tauri2PluginApi

文档待更新……

PakePlusApi

本章后面的 API 接口是 PakePlus 开发的一些 rust 后端接口，可以在 js 中直接调用使用，也仅仅只能在 PakePlus 项目中打包使用。请勿将此 API 用于原生的 tauri 项目。

打开 URL(本窗口)

在脚本中添加以下代码，即可实现打开 URL(本窗口)

  1. const hookClick = (e) => {
  2.     const origin = e.target.closest('a')
  3.     const isBaseTargetBlank = document.querySelector(
  4.         'head base[target="_blank"]'
  5.     )
  6.     if (
  7.         (origin && origin.href && origin.target === '_blank') ||
  8.         (origin && origin.href && isBaseTargetBlank)
  9.     ) {
  10.         e.preventDefault()
  11.         location.href = origin.href
  12.     }
  13. }
  15. window.open = function (url, target, features) {
  16.     console.log('open', url, target, features)
  17.     location.href = url
  18. }
  20. document.addEventListener('click', hookClick, { capture: true })

打开 URL(新窗口)

在脚本中添加以下代码，即可实现打开 URL(新窗口)

  1. const { WebviewWindow } = window.__TAURI__.webviewWindow
  3. const webview = new WebviewWindow('my-label', {
  4.     url: 'https://pakeplus.com/',
  5.     x: 500,
  6.     y: 500,
  7.     width: 800,
  8.     height: 400,
  9.     focus: true,
  10.     title: 'PakePlus Window',
  11.     alwaysOnTop: true,
  12.     center: true,
  13.     resizable: true,
  14.     transparent: false,
  15.     visible: true,
  16. })
  17. webview.once('tauri://created', function () {
  18.     // webview successfully created
  19.     console.log('new webview created')
  20. })
  21. webview.once('tauri://error', function (e) {
  22.     // an error happened creating the webview
  23.     console.log('new webview error', e)
  24. })

打开 URL(默认浏览器)

在脚本中添加以下代码，即可实现打开 URL(默认浏览器)

  1. const { invoke } = window.__TAURI__.core
  2. const hookClick = (e) => {
  3.     const origin = e.target.closest('a')
  4.     const isBaseTargetBlank = document.querySelector(
  5.         'head base[target="_blank"]'
  6.     )
  7.     if (
  8.         (origin && origin.href && origin.target === '_blank') ||
  9.         (origin && origin.href && isBaseTargetBlank)
  10.     ) {
  11.         e.preventDefault()
  12.         invoke('open_url', { url: origin.href })
  13.     }
  14. }
  16. window.open = function (url, target, features) {
  17.     invoke('open_url', { url: url })
  18. }
  20. document.addEventListener('click', hookClick, { capture: true })

下载文件

下载网络链接文件到本地，支持多文件下载，以及下载进度回调

js

  1. const { invoke } = window.__TAURI__.core
  3. if ('__TAURI__' in window) {
  4.     await invoke('download_file', {
  5.         url: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
  6.         savePath: 'test.png',
  7.         fileId: 'test',
  8.     })
  9. }

下载进度

在脚本中添加以下代码，即可监听下载进度回调

js

  1. const { listen } = window.__TAURI__.event
  3. listen('download_progress', (event: any) => {
  4.     downloadProgress.value = Number(
  5.         ((event.payload.downloaded / event.payload.total) * 100).toFixed(2)
  6.     )
  7. })

执行命令

在脚本中添加以下代码，即可实现运行命令

js

  1. const { invoke } = window.__TAURI__.core
  3. if ('__TAURI__' in window) {
  4.     invoke('run_command', { command: 'ls -l' })
  5. }