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

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

本帖最后由 Aliman 于 2024-11-21 17:34 编辑

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

nuoche.7z (1.51 KB, 下载次数: 1605)
复制源码有问题的就下载源码吧
因论坛的html代码插入有BUG，会自动过滤掉按钮代码，复制以下替换下即可
<button class="notify-btn" onclick="notifyOwner()">通知车主挪车</button>
<button class="call-btn" onclick="callOwner()">拨打车主电话</button>

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

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] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!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, 下载次数: 551)

编辑时建议使用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，
。

DINGMAOLI · 发表于 2024-11-13 11:52

本帖最后由 DINGMAOLI 于 2024-11-13 11:59 编辑

我来说一下CloudflareWorkers怎么部署，（自己非常业余，网上结合来的，还请大佬指正）

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

2. 创建Workers
登录Cloudflare账号后，进入控制台，选择“Workers”选项卡，全程默认设置，最后点击“部署”

3. 编写Worker代码
在Worker里点击右上角编辑代码编辑器中，编写JavaScript代码来处理请求。这可以是一个简单的"Hello World"示例

4、把默认代码全部删除，填入我改写的代码。（为避免论坛吃代码，请下载压缩包）

5、编辑个人信息部署
用记事本打开压缩包里的html文件，填好你的appToken、UID和电话号码，然后复制全部内容粘贴到第4步的编辑器里，最后点击“部署”，部署下面我用红线抹去的就是你的网址，用草料二维码生成个二维码使用即可

6、拓展
Workers自动给你分配的网址，国内大概率打不开，建议用自己的域名并托管到Cloudflare，然后在项目设置——域和路由——添加里修改
域名最好是国内备案过的，且有HTTPS加密，最后再把网址用草料二维码转成二维码，否则微信扫完也会显示已停止访问该网页

挪车Workers部署.rar (2.83 KB, 下载次数: 199)

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

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

<!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>

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 = ` 这一段放在哪

wei8751203 · 发表于 2024-11-12 21:00

本帖最后由 wei8751203 于 2024-11-17 21:48 编辑

先识别车牌号对方输入车牌号之后，拨打电话或者发送通知（发送间隔30秒，按需修改）会给指定UID发送消息。并显示对应车主电话！(默认显示时间20秒)

index.7z (2.45 KB, 下载次数: 75)

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

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

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

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

wudalang123 · 发表于 2024-11-12 16:23

lixiali11 发表于 2024-11-12 13:43
“然后把我下面的源码保存为index.html保存到你的网站，再把网站连接制作成二维码”
请问这一步应该怎么 ...

上传到网站
上传 index.html 文件到你的网站

使用FTP客户端：如果您的网站托管在支持FTP的服务器上，您可以使用FTP客户端（如FileZilla）连接到您的服务器，然后将 index.html 文件拖放到服务器的适当目录中。
使用网站管理面板：许多网站托管服务提供管理面板（如cPanel），您可以登录到面板，找到文件管理器，然后上传 index.html 文件。
使用版本控制系统：如果您的网站使用Git进行版本控制（如GitHub Pages、GitLab Pages等），您可以将 index.html 添加到仓库中，然后推送到远程仓库。

创建网站链接
一旦 index.html 文件上传到的网站，将获得一个URL。这个URL就是你的网站链接。生成二维码
使用在线二维码生成器，将你的网站链接转换成二维码：

访问一个在线二维码生成器网站，如 https://www.qr-code-generator.com/。
在提供的文本框中输入的网站链接。
生成二维码，并下载或直接打印二维码。

将这个二维码打印出来并放在您的车上。当有人需要您挪车时，他们可以扫描二维码来通知您。

RenJiu · 发表于 2024-11-9 22:16

二改

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

1	`https://github.com/Renjiu13/clutter-NO/blob/main/HTML/notify.md`

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

感觉很不错啊谢谢大佬

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

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

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

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

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

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

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

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

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

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

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

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

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

这个不错，有创意

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

好东西呀，赶紧借用了

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

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

免费评分

本帖被以下淘专辑推荐:

免费评分

免费评分

免费评分

免费评分

免费评分

点评