Thank you to the friends on L forum for providing the code; this post is just a practical record.
Original post address: https://linux.do/t/topic/254701/101
First, let's look at the implementation effect
Preparation#
- Cloudflare account
- wxpusher's appToken and UID
Address: https://wxpusher.zjiecode.com/admin/main
After logging in, create a new application with any name, then scan the application QR code with WeChat to obtain the appToken and UID.
Create Works#
Paste the code here
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const phone = '139xxxxxxxx' // Change to your phone number
const wxpusherAppToken = 'AT_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // Fill in Wxpusher APP Token
const wxpusherUIDs = ['UID_sxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] // Fill in 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>Notify Car Owner to Move Car</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>Notify Car Owner to Move Car</h1>
<p>If you need to notify the car owner, please click the button below</p>
<button class="notify-btn" onclick="notifyOwner()">Notify Car Owner to Move Car</button>
<button class="call-btn" onclick="callOwner()">Call Car Owner</button>
</div>
<script>
// Call Wxpusher API to send move car notification
function notifyOwner() {
fetch("https://wxpusher.zjiecode.com/api/send/message", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
appToken: "${wxpusherAppToken}",
content: "Hello, someone needs you to move your car, please handle it promptly.",
contentType: 1,
uids: ${JSON.stringify(wxpusherUIDs)}
})
})
.then(response => response.json())
.then(data => {
if (data.code === 1000) {
alert("Notification sent!");
} else {
alert("Failed to send notification, please try again later.");
}
})
.catch(error => {
console.error("Error sending notification:", error);
alert("Error sending notification, please check your network connection.");
});
}
// Call car owner's phone
function callOwner() {
window.location.href = "tel:${phone}";
}
</script>
</body>
</html>
`
return new Response(htmlContent, {
headers: { 'Content-Type': 'text/html;charset=UTF-8' },
})
}
Remember to change your phone number, appToken, and UID. Finally, copy the link of the works and convert it into a QR code, which will be your move car code!
More Fun#
- Accessing Cloudflare from mainland China is relatively slow, so you can add a CDN acceleration domain in the Workers settings to speed up access.
- You can use an online JS encryption tool to encrypt the JS code part to prevent token leakage. If you don't know how, you can ask AI to help you write it.
- If you don't want to disclose your phone number, you can comment out this line of code
<button class="call-btn" onclick="callOwner()">Call Car Owner</button>