编程 on MoeJueのブログ

Web3 鏈上紅包 DApp

Sat, 10 Jan 2026 14:02:35 +0000

這是一個100%去中心化的區塊鏈紅包應用。用戶可以連接錢包，設定金額和數量發送紅包，然後透過連結分享給他人領取。所有資料和操作都基於區塊鏈，完全不需要中心化伺服器，整個過程安全、透明、可追溯。

如果你感興趣，可以在 GitHub 上看看我的程式碼：redpacket‑dapp

功能亮點

🧧 發送紅包: 連接錢包後，設定金額和數量發送紅包到區塊鏈
🎁 領取紅包: 透過分享連結，別人可以連接錢包直接從區塊鏈領取紅包
🔗 智能合約: 使用 Solidity 編寫的安全智能合約處理所有邏輯
🌐 多鏈支援: 支援本地測試網和 BSC 測試網
💼 Web3 整合: 使用 MetaMask 錢包連接
🚀 完全去中心化: 沒有後端伺服器，所有資料儲存在區塊鏈

技術棧

前端：React 19、React Router 6、TypeScript、Vite、Ethers v6
合約層：Hardhat、Solidity 0.8.x
工具：ESLint、Prettier
不需要後端: 零依賴伺服器 ❌

快速啟動

# 1. 安裝專案依賴
npm install
cd react-dapp && npm install && cd ..

# 2. 啟動本地區塊鏈節點
npm run node

# 3. 編譯智能合約
npx hardhat compile

# 4. 部署智能合約
npm run deploy

# 5. 啟動前端
npm run frontend

目錄結構

redpacket-web3/
├─ contracts/                # Solidity 智能合約
│  └─ RedPacket.sol
├─ react-dapp/               # React + Vite 前端
│  ├─ src/
│  │  ├─ components/         # 通用組件（錢包按鈕、創建表單等）
│  │  ├─ config/             # ABI、合約地址配置
│  │  ├─ hooks/              # 自定義 hooks（useWallet）
│  │  ├─ pages/              # 頁面（Home、ClaimPacket）
│  │  ├─ styles/             # 全域樣式
│  │  ├─ utils/              # Web3 工具函數
│  │  └─ App.tsx             # 路由與佈局
│  ├─ .env.example           # 前端所需環境變數說明
│  └─ package.json
├─ scripts/
│  └─ deploy.js              # Hardhat 部署腳本（會自動寫入前端配置）
├─ hardhat.config.js
└─ package.json              # 根目錄腳本（Hardhat + 前端一鍵啟動）

使用指南

創建紅包

打開前端並點擊右上角「連接錢包」。
填寫紅包總金額與份數，應用會在前端隨機拆分金額。
提交後在 MetaMask 中確認交易，等待區塊確認。
成功後可複製系統生成的領取連結，分享給朋友。

領取紅包

打開分享連結（URL 帶有 /claim/{packetId}）。
同樣先連接錢包，然後點擊「點擊領取」。
簽名確認後等待區塊打包，頁面會顯示結果與剩餘份數。

環境變數

dapp/.env（開發環境會自動忽略，請參考 .env.example）
- VITE_RPC_URL：前端直連節點 RPC，預設為 http://127.0.0.1:8545
- VITE_CONTRACT_ADDRESS：可覆蓋部署腳本寫入的地址
- VITE_CHAIN_ID：前端提示使用的鏈 ID（十六進制）
root/.env：若需要在 Hardhat 中引用私鑰或 BSC RPC，可繼續沿用原有寫法。

智能合約（RedPacket.sol）

核心方法：

我不會AE,但是我會Code

Sat, 23 Aug 2025 12:29:01 +0000

✨ 緒山真尋的小窩 ✨

🌸 歡迎來到緒山真尋的小窩 🌸

哇！你發現了我的秘密基地！(*≧ω≦)

這裡是緒山真尋的個人網站，充滿了可愛的動畫和有趣的內容！我會在這裡分享我喜歡的動畫、漫畫、遊戲和一些日常生活中的小確幸～

💕 關於我 💕

我是緒山真尋，一個熱愛成人遊戲的家裡蹲廢柴尼特族。喜歡動畫、漫畫、輕小說和各種可愛的東西！最喜歡的顏色是粉色和淡藍色！

PLAINTEXT

  ∩∩
（･ω･）  <- 這是我！
＿|　⊃／(＿＿
／ └-(＿＿＿／

クリックして展開し、詳細を表示

多鏈支援，真沒你想的那麼簡單

Sat, 05 Jul 2025 08:20:55 +0000

多鏈錢包整合的實踐反思

總算是空閒下來可以整理一下程式碼了，Web3 專案接入多鏈錢包連接功能，主要涉及 Ethereum、Polygon、BSC 和 Solana。乍一聽好像只是「多做幾套相容邏輯」的事，但真正落地後才發現，很多東西其實沒想得那麼簡單。

PLAINTEXT

this.networkConfigs = {
    ethereum: {
        chainId: '0x1', // 1
        chainName: 'Ethereum Mainnet',
        nativeCurrency: {
            name: 'Ethereum',
            symbol: 'ETH',
            decimals: 18
        },
        rpcUrls: ['https://eth-mainnet.public.blastapi.io'],
        blockExplorerUrls: ['https://etherscan.io']
    },
    polygon: {
        chainId: '0x89', // 137
        chainName: 'Polygon Mainnet',
        nativeCurrency: {
            name: 'MATIC',
            symbol: 'MATIC',
            decimals: 18
        },
        rpcUrls: ['https://polygon-rpc.com'],
        blockExplorerUrls: ['https://polygonscan.com']
    },
    bsc: {
        chainId: '0x38', // 56
        chainName: 'BNB Smart Chain',
        nativeCurrency: {
            name: 'BNB',
            symbol: 'BNB',
            decimals: 18
        },
        rpcUrls: ['https://bsc-dataseed.binance.org'],
        blockExplorerUrls: ['https://bscscan.com']
    }
}

クリックして展開し、詳細を表示

多鏈並非簡單的「支援多個錢包」

最大的感受是：鏈不一樣，錢包互動方式也不一樣，連 SDK 的思維方式都不一樣。以太坊生態可以用統一的 Web3.js 處理很多邏輯，而到了 Solana，你會發現它完全是另一套系統：Provider 接入、連接流程、PublicKey 建構方式都不太一樣，甚至連網路延遲和穩定性都影響體驗。

打造 macOS 風格的 Web 應用

Sun, 11 May 2025 11:46:03 +0000

專案概述

在當今的 Web 開發領域，使用者體驗和介面設計變得越來越重要。

Mac Web Vue Template 是一個受 macOS 設計啟發的現代優雅的 Vue.js Web 模板，它是一個基於 Vue.js 的現代化 Web 應用模板，其設計靈感來源於 macOS 的優雅介面。這個專案不僅提供了美觀的 UI 設計，還包含了完整的專案結構和最佳實踐。

線上演示

你可以透過造訪 WebAi 來體驗這個模板的實際效果。邀請碼(MoeJue)

核心特色

macOS 風格的 UI 設計
- 採用 macOS 的設計語言
- 精緻的毛玻璃效果
- 優雅的動畫過渡
現代化的技術棧
- Vue.js 作為核心框架
- Vite 作為建構工具
- Pinia 進行狀態管理
- Vue Router 處理路由
- SCSS 預處理器
- ES6+ 現代特性
響應式設計

萌音商城移動端版本發售

Thu, 17 Apr 2025 09:07:11 +0000

專案介紹

萌音商城行動版是一個基於uniapp開發的多端商城系統，支援iOS、Android、H5及小程式等多個平台。系統採用PHP + MySQL + FastAdmin作為後端技術棧，實現了完整的電商功能。

核心功能

商品管理：分類、列表、詳情展示
購物流程：購物車、結算、支付、訂單管理
用戶系統：會員中心、個人資訊管理
多商戶模式：商戶獨立管理商品與訂單
發貨系統: 支援推送訂單至ERP(管家婆)系統處理
雙模式交易：
- 線上下單快遞發貨
- 線上下單到店自取/外送員配送

系統預覽

後台管理介面

一款開源簡潔高顏值的酷狗第三方客戶端V1.0.0 Beta

Sun, 03 Nov 2024 12:48:04 +0000

MoeKoe 音樂

一款開源、簡潔、高顏值的酷狗第三方客戶端
🌎 GitHub 儲存庫 | 📦️ 下載安裝包 | 💬 瀏覽部落格

多平台文章同步瀏覽器外掛程式 - ArticleSync

Wed, 16 Oct 2024 11:02:49 +0000

ArticleSync - 多平台文章同步插件

ArticleSync 是一個瀏覽器擴充功能，幫助使用者輕鬆將文章同步發佈到多個社交平台。支援將文章從本地草稿發佈到各大平台，如知乎、Bilibili 等。它提供了一站式解決方案，讓你在不同的社交媒體平台上同步文章變得簡單高效。

基於瀏覽器外掛程式模式，自動偵測本地登入帳號，杜絕帳號洩露、環境異常等風險

基於 Chrome Manifest v3 瀏覽器擴充功能標準開發，請注意核心版本要求

背景

你也知道，我這又一下子多了好幾個部落格平台，和一大堆社交網站，如果我想讓它們之間都能保持活躍的更新怎麼辦。(證明我還活著) 還能一鍵盜文章

我最常更新的就是我自己的小破站了，但是其他平台，我可能就只是偶爾更新一下，但是又不想每次都去手動發佈，所以我就想，能不能寫一個外掛程式，自動偵測我本地登入的帳號，然後自動發佈呢。

正所謂，自己動手豐衣足食。鼓搗了好幾天，勉強算是能用的樣子，剩下的就有空再更新了。除非你給我錢

外掛程式還有很多不完善的地方，我也沒有多平台正式在生產環境中實測，如遇報錯，實屬正常，那就提交 issue 吧，或者自己改改，改好了再提交 PR 吧。嘻嘻~

為了不影響我說話，截圖放最後了

還有，開源不易，來個 star 吧，嘿嘿嘿~

本來想加一點私貨進去的，自動關注我的社群平台

功能特色

多平台支援：支援知乎、Bilibili 等各大主流平台，支援自建開源 CMS 系統。
狀態追蹤：在外掛程式介面中查看文章的同步狀態。
帳號管理：可查看與外掛程式綁定的各平台帳號資訊。
可擴展性強：支援開發者透過轉接器模式輕鬆擴展到更多平台。
安全可靠：外掛程式基於瀏覽器擴充功能模式，確保帳號安全，避免帳號洩露等風險。

待辦事項

[ ] 獨立文章編輯器
[ ] 圖片一鍵同步
[x] Markdown 與 HTML 互轉
[ ] 第三方圖床系統
[ ] 多帳號管理
[ ] 多系統客戶端版本
[ ] 一鍵 AI 總結
[ ] 影片同步
[ ] 標籤、分類的支援
[ ] 更友善的錯誤處理
[ ] 更多平台的接入

支援管道

媒體

打贏復活賽,我活過來了

Thu, 03 Oct 2024 02:48:02 +0000

近況

距離上次的閒言碎語已經兩個多月沒說話了，是時候整理整理我的思緒了。上回是發表了一堆感慨，之後就沒聲了，所以是有一點倉促了，後續的活就跟不上了。

又是一年國慶，果然我的國慶堪比雙十一。之前旗下的三個域名(52ecy.cn,moeins.cn,moeins.com)，雖然復活賽是打贏了，但是裝備沒有了。

所以只能新購域名了，同時又把部落格給恢復了，可能還是想自己折騰吧，掛靠在部落格園還是不大舒服的樣子。

之前一直在用的emlog，這會也來場大動作，直接給系統換到了WordPress，同時也換上了新主題。這款主題是由專收爆米花在21年前後的時候就發布了，那會我在loc看到的時候我就star了，一直在我GitHub裡躺了4年lolimeow ，因為那會一直在用emlog，所以就不願意折騰。乘此契機，乾脆一戰到底，所以也是花了一點大功夫，包括數據的遷移，和主題的適配。

雖然作者一直以來都在積極推進主題的更新，也正因此我在使用中沒有遇到太大的麻煩，但也有缺少我之前系統的設定，所以我也一併把這個主題做了更新，並且pull到了原倉庫。上面放的GitHub的連結是我更新後的。

最麻煩的數據遷移部分，我在網上兜兜轉轉了半天，只找到exe版本的，先不說exe版本給人一種莫名的不放心的感覺，況且我現在用的還是Mac的系統，根本就不能直接運行。所謂自己動手豐衣足食，所以我只能花點時間給自己寫一個遷移腳本了。GitHub的地址我放在了文章的底部了，可以完美遷移emlog的數據到WordPress系統中。不愧是我！

重生之我要做商城 - 萌音商城V1.0上線

Wed, 02 Oct 2024 06:17:50 +0000

萌音系列的第N+1個項目來了呢。這其實又是一個鴿了好幾年的項目了，這回總算能把坑填上了。

先上項目地址: https://MoeKoe.cn

我為什麼一直在做項目?

這個問題就很有意思了，為什麼一直在做各種項目，而且還是不掙錢的東西。接觸過我之前一些項目的小夥伴都知道我開發什麼項目都是本著自己用的原則在創作的，當然這次也不例外。一直我就想在某個平台賣賣我那些留著沒用，丟了捨不得的小玩意，同時分享好玩有趣的產品給大家（未來可能還有我自己的IP產品）。「想把最美好的事和物分享給最美好的你」就算，本著「別人有我也要有」的原則，我也得有。

如果說我只是想賣點小玩意，我為何不直接上淘寶、閒魚這樣的平台呢？退一萬步講，就算不上這些平台，我也可以自己搭建一個現成的商城系統啊，現在市面上成熟好用的系統一抓一大把喔，為何還要自己開發呢？

一句話，因為我喜歡，這是我的愛好，我喜歡創造，喜歡做點有意思的東西和事。我想成為一個厲害而又有趣的人，而不是一個只會活著的普通人，我想認識更多有趣的靈魂。厲害對於我的定義並不是說他技術有多厲害、賺錢有多厲害，而是一個人面對挫折和困苦的時候，依然能笑著面對，依然能保持樂觀、不忘初心，這樣的人，我願稱他為厲害的人。

明明是一個發布新項目的文章，又給我寫成大白話部落格了，哈哈哈。

項目介紹

最近在搞什麼？在搞粉嫩粉嫩的東西，一個二次元少女萌系風格的魔法少女商城。

歡迎來到魔法少女的奇幻世界，開啟探索二次元無限可能的冒險之旅！這是專為二次元愛好者量身打造的線上商城。在這裡，你能找到最閃耀的魔法道具、最萌系的變身服飾，還有豐富多樣的二次元周邊商品。無論你鍾情於可愛的萌物，還是酷炫的收藏品，這裡都能滿足你對二次元的所有熱愛與期待！

點開網址你會發現一個讓你眼前一亮（粉）的感覺，沒錯，這就是我想要的風格，粉嫩粉嫩的，少女心爆棚，卡哇伊的感覺，這樣才能突出我的個性。

基於Web3.0的區塊鏈圖片上傳

Mon, 17 Jun 2024 12:57:43 +0000

在開始之前，我們先簡單了解一下基本的概念，我大致歸納為以下幾個點什麼是Web3.0，和區塊鏈又有什麼關係？（上回的文章不就派上用場了）

需求：開發一個基於Python的Web 3.0圖片上傳系統。這個系統將允許用戶上傳圖片，並將圖片儲存在去中心化的網路上，同時記錄交易資訊在區塊鏈上。本來只是寫著玩的，想過要寫成用戶認證、檔案操作集成全套管理的，讓他「終將成為圖片上傳服務的最終解決方案」。實際下來卻發現不是很實際，就作罷了，奈何我一直以來對圖片這麼執著。

步驟概述

環境設定：使用Python開發，安裝必要的Python函式庫。
IPFS整合：將圖片上傳到IPFS，取得圖片的CID（內容識別碼）。
區塊鏈整合：將IPFS CID記錄在區塊鏈上。
Web介面：使用Flask建立一個Web介面，允許用戶上傳圖片。

詳細步驟

1. 環境設定

安裝所需的Python函式庫：

PLAINTEXT

pip install flask web3 ipfshttpclient

クリックして展開し、詳細を表示

2. IPFS整合

IPFS（星際檔案系統）是一種點對點的檔案儲存協定。我們可以使用ipfshttpclient函式庫來與IPFS網路互動。

使用ESP8266-NodeMCU開發板顯示一下我的QQ頭像

Sun, 16 Jun 2024 12:50:42 +0000

诶，說好的自己寫esp8266的開發板韌體的我回來了。 20年說好的，今天回來還願了 ESP8266串口WiFi模塊 - WiFi殺手

今天我們把OLED顯示屏也接上，我此次買的是4腳的OLED(128*64)，不支持彩色顯示的。

NodeMCU開發板

NodeMCU是一個開源的IoT物聯網硬體開發板，由於它支持WIFI功能且使用方法十分類似Arduino開發板，所以近些年獲得了越來越多來自全世界的創客朋友們的青睞。NodeMCU尺寸與Arduino Nano類似。它並不是Arduino團隊開發的，但是我們也可以使用Arduino IDE 對它進行開發。

作為萬物互聯的IoT基礎，首先物聯網控制板的成本不能過高。高昂的物聯網控制元件不利於項目成本控制也不利於廣大創客愛好者學習和使用它。在這一點上，NodeMCU比樹莓派以及Arduino家族的IoT平台等更具優勢。

細心的朋友可能已經發現了，這會我開發板叫做ESP8266-NodeMCU。然而在其它的網站或資料中，有時是用ESP8266有時是用NodeMCU。那麼ESP8266和NodeMCU之間是什麼關係呢？

ESP8266是一塊晶片（被鐵殼子包住的方形的東西），而NodeMCU則是以ESP8266晶片為核心的開發板，如下圖所示。

要想對ESP8266晶片來進行實驗操作是很困難的，因為我們很難將小小一枚晶片上的引腳與我們的電腦連接起來然後再進行上傳程式等操作。於是便誕生了圍繞ESP8266晶片的各種開發板。NodeMCU就是這些開發板中的一員。

NodeMCU開發板上的兩排插針與ESP8266晶片的引腳相連。有了開發板上的兩排插針，我們就可以很輕鬆的使用杜邦線將晶片的引腳接到實驗電路中。NodeMCU開發板上還配有USB接口以及電壓轉換電路。這些為我們提供了很大的便利。我們只要用一根USB數據線就可以輕鬆的實現為ESP8266供電以及上傳程式的操作。當然，NodeMCU開發板上的電路功能還不止這些，我就不再繼續延伸下去了

驅動的安裝

雖然之前已經講過開發板的驅動安裝了，但是不夠詳細。

目前市面上的ESP8266驅動有多種，即使是同一塊NodeMcu的開發板驅動也可能是不一樣的。目前主流的是CH340和CP210X的驅動

驅動的下載請直接去晶片的製造商的官網下載即可 CP210X：https://cn.silabs.com/developers/usb-to-uart-bridge-vcp-drivers CH340C：https://www.wch.cn/downloads/CH341SER_EXE.html