求助：如何基于Tauri实现HTML文本输入并发送对应内容的通知

数据老陈

2026-7-23

实现Tauri从HTML输入发送自定义通知

步骤1：配置通知权限

在项目根目录的tauri.conf.json中，启用通知相关权限：

{
  "tauri": {
    "allowlist": {
      "notification": {
        "send": true
      }
    }
  }
}

步骤2：编写前端HTML界面

创建带输入框和触发按钮的页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tauri 通知演示</title>
</head>
<body>
  <input type="text" id="notifyContent" placeholder="输入通知内容">
  <button onclick="sendCustomNotify()">发送通知</button>

  <script type="module" src="/src/main.js"></script>
</body>
</html>

步骤3：编写JS逻辑调用Tauri通知API

在src/main.js中实现发送逻辑：

import { Notification } from '@tauri-apps/api/notification';

async function sendCustomNotify() {
  const input = document.getElementById('notifyContent');
  const content = input.value.trim();
  
  if (!content) {
    alert('请输入通知内容');
    return;
  }

  try {
    await Notification.sendNotification({
      title: '来自输入的通知',
      body: content
    });
    input.value = ''; // 发送后清空输入框
  } catch (err) {
    console.error('通知发送失败:', err);
    alert('发送失败，请检查配置');
  }
}

// 挂载到全局供HTML按钮调用
window.sendCustomNotify = sendCustomNotify;