自用挪车二维码，免服务器，可微信通知，可拨打电话
本帖最后由 Aliman 于 2024-11-21 17:34 编辑可以部署到cloudflare的wokers，自定义变量phone和wxpusherAppToken、wxpusherUIDs 或者直接在源码修改就行
实现推送到微信
可以绑定一个域名实现cdn加速，把网址转换成二维码，打印即可
也可以把第二个button注释掉，只保留微信通知{:1_918:}
复制源码有问题的就下载源码吧
因论坛的html代码插入有BUG，会自动过滤掉按钮代码，复制以下替换下即可
<button class="notify-btn" onclick="notifyOwner()">通知车主挪车</button>
<button class="call-btn" onclick="callOwner()">拨打车主电话</button>
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-11 10:12 编辑
1677 发表于 2024-11-9 16:00
能把api 的源码发出来吗 老哥
到这里去申请：https://wxpusher.zjiecode.com/admin
新建一个应用，你会获得一个appToken，再扫码就能获得你的UID，然后把我下面的源码保存为index.html保存到你的网站，再把网站连接制作成二维码，贴你车上就可以了
对了，源码最底下的JS脚本，可以找个在线JS加密的给加下密，这样就可以防小白看到你的appToken了，
最后，如果你的车子有多个人开，可以让他们都扫一下，用小逗号添加在里。
好用的话麻烦给点热心值，感谢！
<!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>
复制有问题，可以直接下载源码：
编辑时建议使用notepod工具编辑，以免编码问题导致出错
注意：因论坛的html代码插入有BUG，会自动过滤掉35、36行按钮代码，复制以下替换下即可
<button class="notify-btn" onclick="notifyOwner()">通知车主挪车</button>
<button class="call-btn" onclick="callOwner()">拨打车主电话</button> yaozhe1 发表于 2024-11-9 11:57
详细部署使用的步骤能说下吗？不会用
1. 注册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:59 编辑
我来说一下CloudflareWorkers怎么部署，（自己非常业余，网上结合来的，还请大佬指正）
1. 注册Cloudflare账号
首先，您需要有一个Cloudflare账号。如果没有，可以前往(Cloudflare官网注册一个新账号。
2. 创建Workers
登录Cloudflare账号后，进入控制台，选择“Workers”选项卡，全程默认设置，最后点击“部署”
3. 编写Worker代码
在Worker里点击右上角编辑代码编辑器中，编写JavaScript代码来处理请求。这可以是一个简单的"Hello World"示例
4、把默认代码全部删除，填入我改写的代码。（为避免论坛吃代码，请下载压缩包）
5、编辑个人信息部署
用记事本打开压缩包里的html文件，填好你的appToken、UID和电话号码，然后复制全部内容粘贴到第4步的编辑器里，最后点击“部署”，部署下面我用红线抹去的就是你的网址，用草料二维码生成个二维码使用即可
6、拓展
Workers自动给你分配的网址，国内大概率打不开，建议用自己的域名并托管到Cloudflare，然后在项目设置——域和路由——添加里修改
域名最好是国内备案过的，且有HTTPS加密，最后再把网址用草料二维码转成二维码，否则微信扫完也会显示已停止访问该网页
<!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> 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 = ` 这一段放在哪 很不错的想法。部署到cloudflare的wokers之后按钮没反应。试试后面的静态化看看。 本帖最后由 wei8751203 于 2024-11-17 21:48 编辑
先识别车牌号对方输入车牌号之后，拨打电话或者发送通知（发送间隔30秒，按需修改） 会给指定UID发送消息。并显示对应车主电话！(默认显示时间20秒)
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/。
[*]在提供的文本框中输入的网站链接。
[*]生成二维码，并下载或直接打印二维码。
将这个二维码打印出来并放在您的车上。当有人需要您挪车时，他们可以扫描二维码来通知您。 牛批大佬，这玩意商城上都是要钱的 wei8751203 发表于 2024-11-9 14:12
我也是弄完了 点了没反应，不知道是什么原因。。。
目测按钮两句改一下，其他应该没问题
<button class="notify-btn" onclick="notifyOwner()">通知车主挪车</button>
<button class="call-btn" onclick="callOwner()">拨打车主电话</button> 感觉很不错啊 谢谢大佬 怎么感觉 ，好的方式都是懒人想出来的！ 好家伙好家伙，前段时间刚买一个，现在好了，还能自己搞 这跟放个电话号码有区别吗，好奇？ ashergo 发表于 2024-11-9 11:30
这跟放个电话号码有区别吗，好奇？
也可以把第二个button注释掉，只保留微信通知 ashergo 发表于 2024-11-9 11:30
这跟放个电话号码有区别吗，好奇？
有人专门抄车主电话，这样可以大概率避免 这个不错，有创意
感觉很不错啊 谢谢大佬