先上静态网页界面，有需要的自取，随便改改样式即可。
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({
//Token
appToken: "AT_XXX",
content: messageInput.value.trim(),
contentType: 1,
//通知对象的UID
uids: ["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' // Token
const wxpusherUIDs = ['UID_XXXX'] // 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>
* {
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里面，添加自定义域名。
然后你就可以通过这个自己创建的域名直接访问了。可以随便搜一个二维码转化器，将自己的域名转化为二维码，就可以通过扫码去发送消息或者打电话了，实测二维码扫码秒进网站。
本文中的网站如果访问不了，可能是需要科学上网实现。
标签：扫码,font,color,微信,border,background,margin,btn,免费 From： https://blog.csdn.net/weixin_44347839/article/details/143747000