桌面端 API

注意

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

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

JS 脚本中使用

// core
const {
    addPluginListener,
    invoke,
    Channel,
    checkPermissions,
    convertFileSrc,
    isTauri,
    PluginListener,
    requestPermissions,
    Resource,
    transformCallback,
    SERIALIZE_TO_IPC_FN,
} = window.__TAURI__.core

// app
const {
    defaultWindowIcon,
    fetchDataStoreIdentifiers,
    getIdentifier,
    getName,
    getTauriVersion,
    getVersion,
    hide,
    removeDataStore,
    setDockVisibility,
    setTheme,
    show,
} = window.__TAURI__.app

// event
const { emit, emitTo, listen, once } = window.__TAURI__.event

// dpi
const {
    LogicalPosition,
    LogicalSize,
    PhysicalPosition,
    PhysicalSize,
    Position,
    Size,
} = window.__TAURI__.dpi

// image
const { Image, transformImage } = window.__TAURI__.image

// menu
const {
    CheckMenuItem,
    IconMenuItem,
    itemFromKind,
    Menu,
    MenuItem,
    NativeIcon,
    PredefinedMenuItem,
    Submenu,
} = window.__TAURI__.menu

// path
const {
    appDataDir,
    appConfigDir,
    appLocalDataDir,
    appCacheDir,
    appLogDir,
    audioDir,
    cacheDir,
    configDir,
    dataDir,
    desktopDir,
    documentDir,
    downloadDir,
    executableDir,
    fontDir,
    homeDir,
    pictureDir,
    publicDir,
    resourceDir,
    runtimeDir,
    templateDir,
    videoDir,
    sep,
    delimiter,
    basename,
    dirname,
    extname,
    join,
    normalize,
    resolve,
    isAbsolute,
    localDataDir,
    resolveResource,
    tempDir,
} = window.__TAURI__.path

// 调用新建窗口等函数
const { WebviewWindow } = window.__TAURI__.webviewWindow

// 等等接口，请参考Tauri2官方文档：https://v2.tauri.app/reference/javascript/api/#vanilla-js-api

Vue/React/Next/等使用

// 安装依赖，就可以支持类型提示等
// core api
pnpm install @tauri-apps/api

// dialog api
pnpm install @tauri-apps/plugin-dialog

// fs api
pnpm install @tauri-apps/plugin-fs

// os api
pnpm install @tauri-apps/plugin-os

// 等等接口，请参考Tauri2官方文档：https://v2.tauri.app/reference/javascript/api/#vanilla-js-api

Tauri2Api

文档待更新......

Tauri2PluginApi

文档待更新......

PakePlusApi

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

打开 URL(本窗口)

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

const hookClick = (e) => {
    const origin = e.target.closest('a')
    const isBaseTargetBlank = document.querySelector(
        'head base[target="_blank"]'
    )
    if (
        (origin && origin.href && origin.target === '_blank') ||
        (origin && origin.href && isBaseTargetBlank)
    ) {
        e.preventDefault()
        location.href = origin.href
    }
}

window.open = function (url, target, features) {
    console.log('open', url, target, features)
    location.href = url
}

document.addEventListener('click', hookClick, { capture: true })

打开 URL(新窗口)

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

const { WebviewWindow } = window.__TAURI__.webviewWindow

const webview = new WebviewWindow('my-label', {
    url: 'https://pakeplus.com/',
    x: 500,
    y: 500,
    width: 800,
    height: 400,
    focus: true,
    title: 'PakePlus Window',
    alwaysOnTop: true,
    center: true,
    resizable: true,
    transparent: false,
    visible: true,
})
webview.once('tauri://created', function () {
    // webview successfully created
    console.log('new webview created')
})
webview.once('tauri://error', function (e) {
    // an error happened creating the webview
    console.log('new webview error', e)
})

打开 URL(默认浏览器)

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

const { invoke } = window.__TAURI__.core

if ('__TAURI__' in window) {
    const hookClick = (e) => {
        const origin = e.target.closest('a')
        const isBaseTargetBlank = document.querySelector(
            'head base[target="_blank"]'
        )
        invoke('open_url', { url: origin.href })
    }
    document.addEventListener('click', hookClick, { capture: true })
}

下载文件

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

const { invoke } = window.__TAURI__.core

if ('__TAURI__' in window) {
    await invoke('download_file', {
        url: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
        savePath: 'test.png',
        fileId: 'test',
    })
}

下载进度

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

const { listen } = window.__TAURI__.event

listen('download_progress', (event: any) => {
    downloadProgress.value = Number(
        ((event.payload.downloaded / event.payload.total) * 100).toFixed(2)
    )
})

执行命令

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

const { invoke } = window.__TAURI__.core

if ('__TAURI__' in window) {
    invoke('run_command', { command: 'ls -l' })
}