GEEKSAHRE

极客分享

专注分享各种高质量网站、工具、APP、开源项目等一切好玩的东西
tg_channel
x

利用 Cloudflare Works + WxPusher 自建一個免費的挪車通知服務

感謝 L 站壇友提供的代碼,此貼僅作一個實踐記錄。
原帖地址:https://linux.do/t/topic/254701/101

先看實現效果
image
image

準備#

  • Cloudflare 帳戶
  • wxpusher 的 appToken 和 UID
    地址:https://wxpusher.zjiecode.com/admin/main
    登錄之後新建應用,名稱隨意,然後微信掃描應用二維碼即可獲得 appToken 和 UID

新建 Works#

將代碼粘貼進去

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})
 
async function handleRequest(request) {
  const phone = '139xxxxxxxx' // 修改成你手機號
  const wxpusherAppToken = 'AT_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // 填寫Wxpusher APP Token
  const wxpusherUIDs = ['UID_sxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] // 填寫UIDs
 
  const htmlContent = `
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>通知車主挪車</title>
        <style>
          * { box-sizing: border-box; margin: 0; padding: 0; }
          body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; background: #f0f2f5; color: #333; }
          .container { text-align: center; padding: 20px; width: 100%; max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); background: #fff; }
          h1 { font-size: 24px; margin-bottom: 20px; color: #007bff; }
          p { margin-bottom: 20px; font-size: 16px; color: #555; }
          button { 
            width: 100%; 
            padding: 15px; 
            margin: 10px 0; 
            font-size: 18px; 
            font-weight: bold; 
            color: #fff; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            transition: background 0.3s; 
          }
          .notify-btn { background: #28a745; }
          .notify-btn:hover { background: #218838; }
          .call-btn { background: #17a2b8; }
          .call-btn:hover { background: #138496; }
        </style>
      </head>
      <body>
        <div class="container">
          <h1>通知車主挪車</h1>
          <p>如需通知車主,請點擊以下按鈕</p>
          <button class="notify-btn" onclick="notifyOwner()">通知車主挪車</button>
          <button class="call-btn" onclick="callOwner()">撥打車主電話</button>
        </div>
 
        <script>
          // 調用 Wxpusher API 來發送挪車通知
          function notifyOwner() {
            fetch("https://wxpusher.zjiecode.com/api/send/message", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                appToken: "${wxpusherAppToken}",
                content: "您好,有人需要您挪車,請及時處理。",
                contentType: 1,
                uids: ${JSON.stringify(wxpusherUIDs)}
              })
            })
            .then(response => response.json())
            .then(data => {
              if (data.code === 1000) {
                alert("通知已發送!");
              } else {
                alert("通知發送失敗,請稍後重試。");
              }
            })
            .catch(error => {
              console.error("Error sending notification:", error);
              alert("通知發送出錯,請檢查網絡連接。");
            });
          }
 
          // 撥打車主電話
          function callOwner() {
            window.location.href = "tel:${phone}";
          }
        </script>
      </body>
    </html>
  `
 
  return new Response(htmlContent, {
    headers: { 'Content-Type': 'text/html;charset=UTF-8' },
  })
}

記得修改你的手機號碼以及 appToken 和 UID。最後把 works 的鏈接複製一下,轉換成二維碼就是你的挪車碼了!

更多玩法#

  • 中國大陸訪問 Cloudflare 比較慢,所以你可以在 Workers 的設置中添加一個 CDN 加速域名,加快訪問速度
  • 可以用 js 在線加密工具對 JS 代碼部分進行加密,防止 token 泄露。如果不會可以叫 AI 幫你寫
  • 如果不想泄露手機號碼,可以註釋掉這樣代碼
    <button class="call-btn" onclick="callOwner()">撥打車主電話</button>

🚀歡迎關注我的 Telegram 頻道

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。