最近比较忙，没时间搞新功能，不过发现一个在CloudFlare的Worker运行的挪车程序——用Workers免服务器部署挪车二维码，可微信通知、拨打电话-缙哥哥，发现还不错，就改成了html项目部署到了自己的服务器上给家里人用了。

本教程基于雨云服务器实现，建议选择带有宝塔面板的系统，方便进行操作。

另外欢迎来我的博客火柴人儿的小站

创建WxPusher应用

WxPusher微信消息推送服务

  1. 创建新应用

    image-20250120092253051

  2. 应用信息如下，随意填写即可

    image-20250120092356324

  3. 创建成功时会显示APP_TOKEN，只会显示一次，一定要记下来，之后会用到

    image-20250120092456891

  4. 微信扫描二维码关注这个应用，之后其他人扫码挪车的消息就会通过这个应用发给你

    image-20250120092556426

  5. 关注之后在用户列表里就能看到了，记住这里的UID，之后会用到

    image-20250120092733420

编写HTML项目

我已经把项目上传到gitee了，可以直接拉取，或者自行按下面的步骤创建。
项目地址：nuoche-html: js实现的挪车功能，基于bgwu666 大佬的cloudflare的worker项目，将其转为了html项目方便在自己的服务器运行

  1. 本地创建文件夹，进入文件夹新建记事本文件，将以下内容复制进去后，将appToken、uids、tel处的值改为你自己的，之后将文件改名为nuoche.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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
    function getLastNotifyTime() {
    	return localStorage.getItem('lastNotifyTime') || 0;
    }

    function setLastNotifyTime(time) {
    	localStorage.setItem('lastNotifyTime', time);
    }

    function canNotify() {
    	const lastNotifyTime = getLastNotifyTime();
    	const currentTime = Date.now();
    	const fiveMinutesAgo = currentTime - 5 * 60 * 1000; //每5分钟可提醒一次，可按需修改
    	return lastNotifyTime < fiveMinutesAgo;
    }

    function notifyOwner() {
    	if (!canNotify()) {
    		alert("5分钟后等待时间未结束，暂不可通知。");
    		return;
    	}

    	fetch("https://wxpusher.zjiecode.com/api/send/message", {
    		method: "POST",
    		headers: { "Content-Type": "application/json" },
    		body: JSON.stringify({
    			appToken: "AT_",
    			content: "您好，有人需要您挪车，请及时处理。",
    			contentType: 1,
    			uids: ["UID_"] // 注意：如果你的 UID 是一个数组，确保它是字符串数组的形式
    		})
    	})
    	.then(response => response.json())
    	.then(data => {
    		if (data.code === 1000) {
    			alert("通知已发送！");
    			setLastNotifyTime(Date.now());
    		} else {
    			alert("通知发送失败，请稍后重试。");
    		}
    	})
    	.catch(error => {
    		console.error("Error sending notification:", error);
    		alert("通知发送出错，请检查网络连接。");
    	});
    }
    // 拨打车主电话
    function callOwner() {
      window.location.href = "tel:你的手机号";
    }

    image-20250120092830530

  2. 新建记事本，将以下内容复制进去，并改名为index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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
    <!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 src="./nuoche.js"></script>
    </body>
    </html>

    image-20250120093310609

部署项目

这里最好是有宝塔，宝塔会帮会你将LNMP环境部署好，可以很方便的部署项目，雨云服务器可选择自带宝塔面板的镜像，还是很人性化的

我这里先将宝塔部署的方式说一下，传统部署需要单独写一篇，毕竟要从部署环境开始😂

宝塔部署

  1. 进入宝塔面板，点击网站➡️HTML项目

    image-20250120093807316

  2. 添加项目，域名需要自己先去DNS添加记录，其他的默认即可

    image-20250120094233996

    域名的话一般是用二级域名，到购买域名的地方解析一个A记录即可，我是在cloudflare解析的，就在cloudflare添加一条A记录即可

    image-20250120094252343

  3. 点击根目录会自动跳转到项目目录，在这里删除默认的index.html

    image-20250120094537785

  4. 然后上传本地创建的index.html和nuoche.js

    image-20250120094618138

  5. 浏览器访问xxxx.huochairener-blog.cn，可能会出现乱码的情况，这是因为编码的问题

    image-20250120095206224

  6. 在宝塔文件夹双击打开文件，发现是GBK编码

    image-20250120095403663

  7. 点击编码，改为UTF-8

    image-20250120095433706

  8. 再次刷新页面即可，若还是不行，记得看看nuoche.js文件的编码，也要改为UTF-8

    image-20250120095450010

  9. 测试，点击通知车主挪车，显示通知已发送，微信可以接收到通知

    image-20250120095647043

    image-20250120095751397

制作二维码

网站有了，接下来只需要二维码指向这个网站即可，制作二维码推荐草料二维码生成器，免费的，用了挺久的了，记得大二疫情的时候就开始在家玩这个草料二维码🤣

  1. 点击美化

    image-20250120100347332

  2. 选择标签样式，我是使用的缙哥哥博客中分享的样式用Workers免服务器部署挪车二维码，可微信通知、拨打电话-缙哥哥，编号：B342

    image-20250120100852458

  3. 我自己做了些修改，记得编码内容改为自己的网址

    image-20250120101036311

  4. 下载这个二维码图片即可，随便找个打印店，打印+塑封就能做到这个效果了，10大洋吧应该，学校的话应该会便宜得多

    image-20250120101301451