自用挪车二维码，免服务器，可微信通知，可拨打电话

Aliman · 发表于 2024-11-9 11:14

本帖最后由 Aliman 于 2024-11-9 15:22 编辑

可以部署到cloudflare的wokers，自定义变量phone和wxpusherAppToken、wxpusherUIDs 或者直接在源码修改就行
实现推送到微信
可以绑定一个域名实现cdn加速，把网址转换成二维码，打印即可
也可以把第二个button注释掉，只保留微信通知

nuoche.7z (1.51 KB, 下载次数: 927)
复制源码有问题的就下载源码吧

[JavaScript] 纯文本查看 复制代码

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const phone = '1xxxxxxxxxx' // 车主的手机号
  const wxpusherAppToken = 'AT_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // Wxpusher APP Token
  const wxpusherUIDs = ['UID_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] // 车主的UIDs  , 'UID_d0pycYubbK6d766GNDo5deknw4i4'

  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">通知车主挪车</button>
          <button class="call-btn">拨打车主电话</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' },
  })
}

307921917 · 发表于 2024-11-9 16:13

本帖最后由 307921917 于 2024-11-11 10:12 编辑

1677 发表于 2024-11-9 16:00
能把api 的源码发出来吗老哥

到这里去申请：https://wxpusher.zjiecode.com/admin
新建一个应用，你会获得一个appToken，再扫码就能获得你的UID，然后把我下面的源码保存为index.html保存到你的网站，再把网站连接制作成二维码，贴你车上就可以了
对了，源码最底下的JS脚本，可以找个在线JS加密的给加下密，这样就可以防小白看到你的appToken了，
最后，如果你的车子有多个人开，可以让他们都扫一下，用小逗号添加在[UID1,UID2]里。
好用的话麻烦给点热心值，感谢！

[HTML] 纯文本查看 复制代码

<!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">通知车主挪车</button>
        <button class="call-btn">拨打车主电话</button></div>
<script>
function notifyOwner() {
    fetch("https://wxpusher.zjiecode.com/api/send/message", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({
            appToken: "AT_uOKPJVyVlxVd************HKaA",
            content: "您好，有人需要您挪车，请及时处理。",
            contentType: 1,
            uids: ["UID_B0GShlS*************Dms","UID_Rh*********B5QK"]
        })
    })
    .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:1318888888";
}
</script>
</body></html>

复制有问题，可以直接下载源码：

index.zip (1.33 KB, 下载次数: 253)

编辑时建议使用notepod工具编辑，以免编码问题导致出错

注意：因论坛的html代码插入有BUG，会自动过滤掉35、36行按钮代码，复制以下替换下即可
<button class="notify-btn" onclick="notifyOwner()">通知车主挪车</button>
<button class="call-btn" onclick="callOwner()">拨打车主电话</button>

wudalang123 · 发表于 2024-11-9 19:02

yaozhe1 发表于 2024-11-9 11:57
详细部署使用的步骤能说下吗？不会用

1. 注册Cloudflare账号

首先，您需要有一个Cloudflare账号。如果没有，可以前往[Cloudflare官网](Cloudflare官网注册一个新账号

。
2. 创建Workers

登录Cloudflare账号后，进入控制台，选择“Workers”选项卡，

。
3. 编写Worker代码

在Worker的编辑器中，您需要编写JavaScript代码来处理请求。这可以是一个简单的"Hello World"示例，

。
4. 登录Wrangler CLI

如果您选择使用Wrangler CLI（Cloudflare官方提供的命令行工具）

bash

npm install -g wrangler

然后使用以下命令登录：

bash

wrangler login

。
5. 本地预览Worker

在部署到Cloudflare之前，您可以在本地预览您的Worker。启动一个本地服务器，通过访问localhost:8787来查看您的Worker效果：

bash

wrangler dev

。
6. 部署到Cloudflare

最后，使用以下命令将您的Worker部署到Cloudflare：

bash

wrangler publish

部署完成后，您的Worker将在全球范围内的Cloudflare边缘网络中运行

。
7. 绑定自定义域名（可选）

如果您希望使用自定义域名访问您的Worker，
。

307921917 · 发表于 2024-11-9 15:29

[HTML] 纯文本查看 复制代码

<!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>
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(["用户的UID列表"])
        })
    })
    .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:131********";
}
</script>
</body>
</html>

wmx400 · 发表于 2024-11-9 16:00

很不错的想法。部署到cloudflare的wokers之后按钮没反应。试试后面的静态化看看。

mlq521 · 发表于 2024-11-9 14:50

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const phone = '156000000' // 车主的手机号
  const wxpusherAppToken = 'AT_************************' // Wxpusher APP Token
  const wxpusherUIDs = ['UID_************************'] // 车主的UIDs

  const htmlContent = ` 这一段放在哪

LuckyClover · 发表于 2024-11-9 11:29

牛批大佬，这玩意商城上都是要钱的

lxfx1 · 发表于 2024-11-9 14:13

wei8751203 发表于 2024-11-9 14:12
我也是弄完了点了没反应，不知道是什么原因。。。

目测按钮两句改一下，其他应该没问题
<button class="notify-btn" onclick="notifyOwner()">通知车主挪车</button>
<button class="call-btn" onclick="callOwner()">拨打车主电话</button>

esotao · 发表于 2024-11-9 12:34

本帖最后由 esotao 于 2024-11-9 13:05 编辑

这段代码能在宝塔里搭建吗，有个宝塔不会部署。。小白。。

iawyxkdn8 · 发表于 2024-11-9 11:24

怎么感觉，好的方式都是懒人想出来的！

Aliman · 发表于 2024-11-9 11:31

ashergo 发表于 2024-11-9 11:30
这跟放个电话号码有区别吗，好奇？

有人专门抄车主电话，这样可以大概率避免

malaxiangguo · 发表于 2024-11-9 11:21

感觉很不错啊谢谢大佬

LPCQQ120828 · 发表于 2024-11-9 11:27

好家伙好家伙，前段时间刚买一个，现在好了，还能自己搞

ashergo · 发表于 2024-11-9 11:30

这跟放个电话号码有区别吗，好奇？

Aliman · 发表于 2024-11-9 11:30

ashergo 发表于 2024-11-9 11:30
这跟放个电话号码有区别吗，好奇？

也可以把第二个button注释掉，只保留微信通知

yxnwh · 发表于 2024-11-9 11:33

这个不错，有创意

WJFCYLIB · 发表于 2024-11-9 11:36

感觉很不错啊谢谢大佬

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] 自用挪车二维码，免服务器，可微信通知，可拨打电话

免费评分

本帖被以下淘专辑推荐:

免费评分

免费评分

免费评分

点评

浏览过的版块