实现扫码挪车，微信通知、打电话（内有免费部署静态网站+免费域名的方法）

先上静态网页界面，有需要的自取，随便改改样式即可。
html+css+js

<!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>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;line-height: 1.6;background-color: #f8f9fa;color: #333;}.container {max-width: 600px;margin: 20px auto;padding: 20px;background: white;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}h1 {text-align: center;color: #2c3e50;margin-bottom: 20px;font-size: 24px;}.message-area {margin-bottom: 20px;}textarea {width: 100%;height: 120px;padding: 10px;border: 1px solid #ddd;border-radius: 5px;resize: none;font-size: 16px;margin-bottom: 5px;}.char-count {text-align: right;color: #666;font-size: 14px;margin-bottom: 10px;}.templates {margin-bottom: 20px;}.template-btn {background: #f8f9fa;border: 1px solid #ddd;border-radius: 5px;padding: 8px 15px;margin: 0 5px 5px 0;cursor: pointer;font-size: 14px;transition: all 0.3s ease;}.template-btn:hover {background: #e9ecef;}.action-buttons {display: flex;gap: 10px;}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;}/* 模态框样式 */.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;}.modal-content {position: relative;background-color: white;margin: 20% auto;padding: 20px;width: 90%;max-width: 400px;border-radius: 10px;text-align: center;}.modal-title {margin-bottom: 15px;font-size: 18px;color: #2c3e50;}.modal-phone {font-size: 24px;color: #007bff;margin-bottom: 20px;}.modal-buttons {display: flex;gap: 10px;justify-content: center;}.modal-btn {padding: 8px 20px;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;transition: all 0.3s ease;}.confirm-btn {background: #28a745;color: white;}.confirm-btn:hover {background: #218838;}.cancel-btn {background: #dc3545;color: white;}.cancel-btn:hover {background: #c82333;}</style></head><body><div class="container"><div style=" display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;"><div style="font-size: 1.625rem;">通知</div><img src="https://img1.baa.bitautotech.com/dzusergroupfiles/2024/03/07/b7e9955a910740c1a978e5d9310679bf.jpg"style="width: 6.5rem; height: 6.5rem;"><div style="font-size: 1.625rem;">车主挪车</div></div><div class="message-area"><textarea id="messageInput" placeholder="请输入微信通知内容"oninput="updateCharCount()">您好，有人需要您挪车，请及时处理。</textarea><div id="tips" style="color: #666666; font-size: 1rem;">可自行编辑微信通知消息，带来不便，请您见谅</div><div id="charCount" class="char-count">0/200</div></div><p>通知车主，请点击以下按钮</p><button class="notify-btn" onclick="notifyOwner()">微信通知车主</button><button class="call-btn" onclick="callOwner()">拨打车主电话</button></div><script>updateCharCount();function notifyOwner() {const messageInput = document.getElementById('messageInput');fetch("https://wxpusher.zjiecode.com/api/send/message", {method: "POST",headers: {"Content-Type": "application/json"},body: JSON.stringify({//TokenappToken: "AT_XXX",content: messageInput.value.trim(),contentType: 1,//通知对象的UIDuids: ["UID_XXXXX"]})}).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:181XXXXXXXX";}function updateCharCount() {const messageInput = document.getElementById('messageInput');const charCount = document.getElementById('charCount');const notifyBtn = document.getElementsByClassName('notify-btn');const currentLength = messageInput.value.length;charCount.textContent = currentLength + '/200';if (currentLength > 200) {charCount.style.color = '#dc3545';} else {charCount.style.color = '#666';}}</script></body>
</html>

效果如图显示。
在这里插入图片描述
这里要实现微信消息提示，需要wxpusher，可以借助一下这个平台 https://wxpusher.zjiecode.com/。

https://wxpusher.zjiecode.com/admin/
扫码登录，然后创建一个应用，信息填写一下，会得到一个Token。记录。
将需要收到通知的微信，扫一下应用管理->关注应用。
在用户管理->用户列表中有个UID 记录。【想多个微信都能收到的，也可以扫记录多个UID】在这里插入图片描述
静态网页的内容就差不多了，如果你拥有自己的云服务器或者有ip，直接部署，结束。
如果没有，这里使用免费的服务器 cloudflare 连不上的可能需要科学上网。

点击注册。这个注册流程应该不存在疑问。完成之后进入控制台，如下：
在这里插入图片描述
点击workers和pages，点击创建Worker，不用管里面的具体内容，点击部署。成功之后点击右上角编辑代码
蒋刚刚的Html转化为纯JavaScript部署，不会的直接参考下面

addEventListener('fetch', event => {event.respondWith(handleRequest(event.request))
})async function handleRequest(request) {const phone = '181XXXXXXX' // 手机号const wxpusherAppToken = 'AT_XXXX' // Tokenconst wxpusherUIDs = ['UID_XXXX'] // UIDsconst 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>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;line-height: 1.6;background-color: #f8f9fa;color: #333;}.container {max-width: 600px;margin: 20px auto;padding: 20px;background: white;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}h1 {text-align: center;color: #2c3e50;margin-bottom: 20px;font-size: 24px;}.message-area {margin-bottom: 20px;}textarea {width: 100%;height: 120px;padding: 10px;border: 1px solid #ddd;border-radius: 5px;resize: none;font-size: 16px;margin-bottom: 5px;}.char-count {text-align: right;color: #666;font-size: 14px;margin-bottom: 10px;}.templates {margin-bottom: 20px;}.template-btn {background: #f8f9fa;border: 1px solid #ddd;border-radius: 5px;padding: 8px 15px;margin: 0 5px 5px 0;cursor: pointer;font-size: 14px;transition: all 0.3s ease;}.template-btn:hover {background: #e9ecef;}.action-buttons {display: flex;gap: 10px;}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;}/* 模态框样式 */.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;}.modal-content {position: relative;background-color: white;margin: 20% auto;padding: 20px;width: 90%;max-width: 400px;border-radius: 10px;text-align: center;}.modal-title {margin-bottom: 15px;font-size: 18px;color: #2c3e50;}.modal-phone {font-size: 24px;color: #007bff;margin-bottom: 20px;}.modal-buttons {display: flex;gap: 10px;justify-content: center;}.modal-btn {padding: 8px 20px;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;transition: all 0.3s ease;}.confirm-btn {background: #28a745;color: white;}.confirm-btn:hover {background: #218838; }.cancel-btn {background: #dc3545;color: white;}.cancel-btn:hover {background: #c82333;}</style></head><body><div class="container"><div style=" display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;"><div style="font-size: 1.625rem;">通知</div><img src="https://img1.baa.bitautotech.com/dzusergroupfiles/2024/03/07/b7e9955a910740c1a978e5d9310679bf.jpg"style="width: 6.5rem; height: 6.5rem;"><div style="font-size: 1.625rem;">车主挪车</div></div><div class="message-area"><textarea id="messageInput" placeholder="请输入微信通知内容"οninput="updateCharCount()">您好，有人需要您挪车，请及时处理。</textarea><div id="tips" style="color: #666666; font-size: 1rem;">可自行编辑微信通知消息，带来不便，请您见谅</div><div id="charCount" class="char-count">0/200</div></div><p>通知车主，请点击以下按钮</p><button class="notify-btn" οnclick="notifyOwner()">微信通知车主</button><button class="call-btn" οnclick="callOwner()">拨打车主电话</button></div><script>updateCharCount();function notifyOwner() {const messageInput = document.getElementById('messageInput');fetch("https://wxpusher.zjiecode.com/api/send/message", {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify({appToken: "${wxpusherAppToken}",content:  messageInput.value.trim(),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}";}function updateCharCount() {const messageInput = document.getElementById('messageInput');const charCount = document.getElementById('charCount');const notifyBtn = document.getElementsByClassName('notify-btn');const currentLength = messageInput.value.length;charCount.textContent = currentLength + '/200';if (currentLength > 200) {charCount.style.color = '#dc3545';} else {charCount.style.color = '#666';}}</script> </body></html>`return new Response(htmlContent, {headers: { 'Content-Type': 'text/html;charset=UTF-8' },})
}

粘贴上去，点击右上角部署，此时通过部署旁边的访问的域名，已经可以正常访问，但是存在一个问题，就是这个服务器在外网，所以可能有时候就连不上，访问不了，解决方案，自己再加一个域名。在这里插入图片描述
这里用一个免费的域名申请网站US.KG
这里注册流程会有一些疑问，比如需要美国的信息，可以使用身份生成
https://www.amz123.com/tools-fakeidentity

注册注意点，需要记住你的UserName，等会要用，号码的格式要是+1-XXXX的形式，从里面改一下，获取邮箱不要用gamil，可能会收不到验证。
最关键的一步，选择github的验证（前提条件，你得拥有github的账户，并且星标他的仓库）然后点击下面的发起申请，会跳转到一个页面，需要填写的就是username 还有注册的目的。审核通过了会得到途中下面的回复。此时可以回到初始界面，进行登录了。在这里插入图片描述
创建自己的域名
域名就成功创建了。后续的工作就是把域名连到cf服务器上
粘贴，点击继续，把里面的2个复制US.KG的里面，点击注册，US.KG的操作就结束了

然后点击这个检查。如果成功，左上角会变成绿色的活动，此时就可以看到ssl边缘证书里是有效的在这里插入图片描述

最后一步，把域名连接到Worker里面，添加自定义域名。
然后你就可以通过这个自己创建的域名直接访问了。可以随便搜一个二维码转化器，将自己的域名转化为二维码，就可以通过扫码去发送消息或者打电话了，实测二维码扫码秒进网站。
在这里插入图片描述