L 站のフォーラム友達が提供してくれたコードに感謝します。この投稿は実践記録としてのみ作成されています。
元の投稿アドレス：https://linux.do/t/topic/254701/101
実装効果を先に見てみましょう
準備#
- Cloudflare アカウント
- wxpusher の appToken と UID
アドレス：https://wxpusher.zjiecode.com/admin/main
ログイン後、新しいアプリを作成し、名前は自由に設定し、次に WeChat でアプリの QR コードをスキャンすると appToken と UID を取得できます。
新しい Works を作成#
コードを貼り付けます
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const phone = '139xxxxxxxx' // あなたの電話番号に変更してください
const wxpusherAppToken = 'AT_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // Wxpusher APP Tokenを入力してください
const wxpusherUIDs = ['UID_sxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] // 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>
* { 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>
// 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);
alert("通知送信中にエラーが発生しました。ネットワーク接続を確認してください。");
});
}
// 車主に電話をかける
function callOwner() {
window.location.href = "tel:${phone}";
}
</script>
</body>
</html>
`
return new Response(htmlContent, {
headers: { 'Content-Type': 'text/html;charset=UTF-8' },
})
}
あなたの電話番号、appToken、UID を忘れずに変更してください。最後に works のリンクをコピーし、QR コードに変換すれば、あなたの駐車コードになります！
さらなる遊び方#
- 中国本土から Cloudflare へのアクセスが遅いため、Workers の設定で CDN 加速ドメインを追加してアクセス速度を向上させることができます。
- JS コード部分を暗号化するためにオンラインの JS 暗号化ツールを使用して、トークンの漏洩を防ぐことができます。できない場合は AI に手伝ってもらうことができます。
- 電話番号を漏らしたくない場合は、次のコードをコメントアウトできます。
<button class="call-btn" onclick="callOwner()">車主に電話をかける</button>