编程 on MoeJue's Blog

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

✨ 緒山真尋的小窩 ✨

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

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

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

💕 關於我 💕

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

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

🎀 網站內容 🎀

🌟 精美動畫展示
📚 我的私房照
🎵 好聽的音樂
📷 日常生活的小片段

🌈 關於 🌈

🎭 演示: https://mahiro.moejue.cn/
🏠 個人部落格: https://MoeJue.cn/
🐱 GitHub: https://github.com/iAJue/Mahiro
📧 官方網站: https://onimai.jp/

📝 版權聲明 📝

本網站由 @Moejue 設計和開發
網站中使用的所有動畫片段、漫畫圖片、角色形象及相關內容的版權均歸原作者(ねことうふ（Nekotofu）)及其發行公司(Studio Bind、Ichijinsha)所有
如有侵權，請透過以上聯絡方式告知，我會立即刪除相關內容
GNU GENERAL PUBLIC LICENSE Version 2
Copyright © 2025 MoeJue. All rights reserved.

💌 特別感謝 💌

感謝所有喜歡緒山真尋的朋友們！(●’◡’●)

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

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

多鏈錢包整合的實踐反思

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

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+ 現代特性
響應式設計
- 完美適配各種螢幕尺寸
- 流暢的行動裝置體驗

專案結構解析

專案採用了清晰且模組化的目錄結構：

src/
├── assets/          # 靜態資源
├── components/      # Vue 組件
│   ├── common/     # 通用組件
│   ├── system/     # 系統組件
│   └── apps/       # 應用組件
├── views/          # 頁面視圖
├── router/         # 路由配置
├── stores/         # 狀態管理
└── utils/          # 工具函數

這種結構設計使得專案具有良好的可維護性和可擴展性。

萌音商城移動端版本發售

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

專案介紹

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

核心功能

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

系統預覽

後台管理介面

小程式端介面

版本說明

目前版本為V1.0版，部分介面為預留規劃，將根據實際需求持續更新完善。由於尚未正式發布版本並上線小程式營運，因此目前沒有線上版本可供演示。

購買說明

價格：188元 (版本更新後將會視情況調整價格，請以實際價格為準)
內容：完整原始碼（含行動端和後台，無加密無授權）
推薦返利：推薦好友購買可獲20%返利
更新服務：終身免費更新
使用須知：禁止私自轉售，違規將停止更新服務
開發支援：原始碼含詳細註釋，方便二次開發
專案託管：程式碼託管於GitHub，更新日誌完整透明
多端支援: 需要自行編譯其他客戶端，基於微信小程式環境開發

聯繫方式

QQ交流群：點擊加入
由於沒有個人QQ連結，加群後請@群主諮詢購買事宜
專案滯銷了，請幫幫阿珏醬

線上演示

微信小程式端演示影片
後台演示環境請聯繫諮詢
微信小程式可聯繫添加體驗權限

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

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

MoeKoe 音樂

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

前言

早在約 10 年前，當時我還在使用網頁版 QQ 時就已經開始使用酷狗音樂了（也是十多年的老粉絲了），所以這些年收藏的歌曲全部都在上面。後來我也嘗試開始使用網易雲或 QQ 音樂，也嘗試把酷狗的歌單匯入進去，但是效果都不盡理想。我聽的大多是日漫 OP，好多歌曲都沒辦法找到。

兜兜轉轉最後還是回到酷狗，但是在 Mac 端的酷狗，時常可能會出現不能播放的情況，雖說介面沒什麼功能，但也挺好的。在網友的推薦下，我現在一直是在酷狗的概念版上聽歌，並且是市面上為數不多能免費聽 VIP 歌曲的音樂播放軟體了，強力推薦。

我在我的個人介紹頁面說我特別喜歡聽歌，尤其是日漫 OP。怎麼證明呢？（之前我網頁版歌單也年久失修了）那就自己開發一個音樂播放器。

✨ 特性

✅ 使用 Vue.js 全家桶開發
🔴 酷狗帳號登入（掃碼/手機/帳號登入）
📃 支援歌詞顯示
📻 每日推薦歌曲
🚫🤝 無任何社交功能
🔗 官方伺服器直連，無任何第三方 API
✔️ 每日自動領取 VIP，登入即是 VIP
🎨 主題色切換
👋 啟動問候語
⚙️ 多平台支援
🛠 更多特性開發中

待辦清單

[ ] 📺 支援 MV 播放
[ ] 🌚 自動切換淺色/深色模式
[ ] 👆 支援 Touch Bar
[ ] 🖥️ 支援 PWA，可在 Chrome/Edge 中點擊網址列右邊的 ➕ 安裝到電腦
[ ] 🟥 支援 Last.fm Scrobble
[ ] 🎧 支援 Mpris
[ ] ⌨️ 自訂快捷鍵和全域快捷鍵
[ ] 🤟 多語言支援
[ ] 📻 桌面歌詞
[ ] ⚙️ 系統架構優化
[ ] 🎶 歌曲、歌單管理/收藏、取消收藏

📦️ 安裝

請造訪本專案的 Releases 頁面下載安裝包。

多平台文章同步瀏覽器外掛程式 - 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系統中。不愧是我！

圖片我還是一樣，一份存七牛雲備份，一份存新浪圖床，轉過來發現市場上沒有好用適合我的七牛雲插件，我又自己撸了一個

新域名

雖然我也很不想，但是又只能換域名了，之前的域名就給人做嫁衣了。萌音系列: MoeKot.cn。萌音系列的包括(萌音筆記、萌音發卡、萌音社群、萌音商城等)以後都會放在這個域名下。主站系列: MoeJue.cn。這是我的主站，包括部落格和一些不帶系列的項目都會放到這個域名下面。

解釋

Moe: 日文裡的「萌え」的讀音，羅馬音的寫法，中文裡一般翻譯成「萌」。 Kot: 日語「聲音」的意思，羅馬音寫法。 Jue: 阿珏醬的簡版音譯。

部落格

我又是一個特別念舊和重感情的人，所以連之前的部落格我都一同保留下來了。Xlog cnblogs emlog Blog 相關的網站的域名我也做了遷移，就不一一列出來了，當然也可能會漏掉一些連結沒替換全。

所有的數據都是原汁原味的，不漏掉每一個人的數據。甚至是部落格的註冊用戶的數據我也一同搬遷過來了，可以直接在新系統上登入，密碼是一樣的。

快來star一下吧！

食用方法也一併寫到了README.md裡了，如果遇到什麼問題也可以直接提交issue。

emlog遷移WordPress腳本

我的部落格即將同步至騰訊雲開發者社群，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=15kxzzid10tgx

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

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

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

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

我為什麼一直在做項目?

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

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

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

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

項目介紹

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

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

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

技術棧

Vue.js3
Vite
Pinia
Axios
Node.js
Express
Mysql
Nginx
前後端分離
MySQL執行緒池

Vue.js全家桶真是太棒了，省去自己寫原生的煩惱，目前國際化插件(i18n)這個版本還沒有上，由於市面上的UI庫並不直接符合我對這個項目的定位和我的個性，所以並沒有使用現成的界面庫，全靠自己手撸。

介紹:

支援虛擬幣USDT（只需填寫錢包地址，自動監控到帳，無須外置程式，監控系統有新訂單自動啟動，30分鐘無新訂單自動休眠，減少資源消耗）
支援支付寶當面付支付，即時到帳，自動回調
支援使用者註冊、登入、登出、修改密碼、修改頭像、商品評論
支援商品管理、商品分類管理
支援訂單管理、訂單支付、訂單發貨、物流查詢
支援商品訂單數據分析
全站響應式佈局
前後端分離
MySQL執行緒池
系統的基本資訊設定

第一個版本就只增加了基礎和必要的功能，新功能在設計的時候就已經考慮到了，資料庫和程式碼都做了預留（所以當你看到某一個按鈕點擊了沒有反應的時候不要緊張，因為它後面根本就沒有程式碼），會在未來的版本中進行添加。目前商城售賣的是一種實物發貨的形式，未來會加上虛擬商品的售賣，基本就是把萌音發卡的功能都直接給合併進來了。

我對這個項目的命名是mall，而不是shop，所以之後它有機會變成一個商場，而不只是一個商店。

未來:

多商戶模式。直接使用者申請入駐商城成為商家，借助萌音商城進行售賣自己的產品
商品多產品分類。產品更多的規格分類
更多的支付方式。因為目前作者沒有其他的支付權限，僅對接了兩個
支援虛擬商品。算是把發卡的功能給集成進來了
商品海報宣傳圖生成
郵件系統。可有可無的通知功能而已
右下角的多功能選單。下方的笑臉小人，會成為一個智能導航系統
增加商品介面數據顯示。數據一目了然
多語言支援(i18n)。跟隨國際化潮流，走向世界
簡訊系統。跟郵件系統一模一樣
Redis快取。本來是準備在這個版本加上去的，不過數據的控制也還好
暗黑模式。也是跟隨潮流

如何獲取原始碼?

贊助阿珏醬 233RMB+ 即可獲取原始碼。
曾經贊助過阿珏醬的小夥伴（如果之前贊助的總金額不足233需要進行補差價的形式，如果超過了233則只需再贊助1元重新簽訂契約即可直接獲得）

點擊這裡某社群官方交流群去贊助阿珏醬。因為放不了個人QQ連結，所以我放了群連結，加群@群主即可。

為什麼不設商業版?

為什麼不設商業版，而是贊助版，這有什麼區別呢？商業版，那就需要一個授權系統，同時可能還不一定提供原始碼，可能還需要提供技術支援，並且需要更多完善的功能。商業版的錢是給項目本身的，和作者是一種利益關係，一種商業合同的模式，作者需要對其（人）負責。（我特別不喜歡這種感覺，這可能就是我掙不到錢的原因吧）

而贊助版，贊助的是作者本人，是一種個人意願，一種朋友與朋友之間約定的一種契約模式，作者只對項目本身負責。

當然你可能會覺得我在玩文字遊戲，鑽文字的空子。所以嘛，這完全就是贊助行為了。雖然這次的贊助門檻有那麼點商業的氣息，那是因為我和我老婆們要恰飯的嘛

提示

贊助版提供Vue前端原始碼+編譯後的靜態檔案+Node.js後端源檔案。
所有贊助版獲得的都是源檔案，不存在加密或混淆的情況，還請不要洩露，同時也是保障自己的權益。
修改原始碼需要一定基礎程式設計知識，如果不會，請勿修改。
提供一次寶塔面板的部署服務。
網站的介面效果更傾向少女萌系風格，可能並不適用大眾向的產品，還請注意。
因為程式碼具有可複製性，契約一經簽訂，不可撤銷，還請諒解。

這次還是跟以往一樣採用了贊助版的模式獲取原始碼，為什麼這次又開放了原始碼的獲取呢？多少是受之前萌音社群的影響吧，萌音社群是我花了兩個月多精心寫出來的，同時沒有接受贊助獲得原始碼這個方式，純屬自己營運，那些要贊助的都被我勸退了，雖然最後還是收到了一筆贊助。最後呢，感覺對不起萌音社群，被自己給砸手裡了，沒讓更多人知道它的存在。那為什麼不直接開源呢？那樣我反而覺得更對不起這個項目，會讓人覺得這是一個觸手可得的東西，反而不再珍視它。雖然沒有直接開源，但我會把項目相關的架構和設計思路和部分程式碼發出來，給大家參考，並不影響大家學習。

基於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函式庫：

pip install flask web3 ipfshttpclient

2. IPFS整合

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

首先，請確保你已經安裝並運行了IPFS節點。如果還沒有安裝IPFS，可以在IPFS官網找到安裝指南。

以下是上傳圖片到IPFS的程式碼範例：

import ipfshttpclient

def upload_to_ipfs(file_path):
    client = ipfshttpclient.connect('/ip4/127.0.0.1/tcp/5001')
    res = client.add(file_path)
    return res['Hash']

3. 區塊鏈整合

使用web3.py函式庫將IPFS CID記錄到區塊鏈上。我們將以太坊（Ethereum）作為範例區塊鏈。

以下是一個簡單的智能合約範例，用於儲存IPFS CID：

pragma solidity ^0.8.0;

contract IPFSStorage {
    mapping(address => string[]) public userCIDs;

    function storeCID(string memory cid) public {
        userCIDs[msg.sender].push(cid);
    }

    function getCIDs() public view returns (string[] memory) {
        return userCIDs[msg.sender];
    }
}

編譯並部署該合約後，使用以下Python程式碼與智能合約互動：

使用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

下載適合自己平台的驅動安裝程式需要看清楚自己的串口晶片型號是否在驅動程式的支持範圍內

如何查看自己的開發板需要什麼驅動

直接看，下圖中豎著的長方形黑條，那個就是USB轉串口晶片。上面會寫明晶片的型號名稱
問你買的商家

顯示屏的焊接

不要焊接錯了，不然會燒壞晶片的 OLED接線：

GND - GND
VCC - VCC
SCL - GPIO5(D1)
SDA - GPIO4(D2)

烙鐵加熱中

下面就是焊接好的，注意接線，不一定是按我這個順序的，要看名稱

Arduino IDE的安裝

下載arduino IDE https://www.arduino.cc/en/software
安裝安裝還要我教？
配置點擊工具-開發板-開發板管理器,在設置中寫上開發板地址：http://arduino.esp8266.com/stable/package_esp8266com_index.json 之後就會自動下載相應的支援庫文件了，期間需要保證網絡的科學性
選擇開發板 NodeMCU1.0(ESP-12EModule)
選擇端口在電腦的設備管理器中找到你的開發板的COM口

Arduino代碼

有時候我覺得我逼逼叨叨說一大堆還不如直接上代碼來的直接，我覺得你肯定也是想直接看代碼的而不是聽我說一堆廢話我也盡可能在代碼中註釋了(編寫arduino代碼請遵循C/C++語言規範)

下列的例子中，連接WiFi使用的是庫，首次連接需要使用手機連接ESP8266發送出來的WiFi先進行配網操作。寫出屏幕使用的是庫，支持中文直接寫出

這是一個簡單的連接WiFi和屏幕顯示圖片的示例

#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <ESP8266WiFi.h>
#include <NTPClient.h>
#include <WiFiManager.h>
#include <U8g2lib.h>

#define SDA 4  // SDA引脚，默认gpio4(D2)
#define SCL 5  // SCL引脚，默认gpio5(D1)

Adafruit_SSD1306 oled(128, 64, &Wire,-1);   //OLED 屏幕实例化
WiFiUDP ntpUDP;

NTPClient timeClient(ntpUDP,"pool.ntp.org", 8*3600, 60000);

U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /*clock=*/SCL, /*data=*/SDA, /*reset=*/U8X8_PIN_NONE);           // 选择显示屏幕

// 只执行一次
void setup() {

  u8g2.begin();            // 初始化
  u8g2.enableUTF8Print();  // UTF8允许
  u8g2.setFont(u8g2_font_wqy12_t_gb2312b); //字体大小   u8g2_font_wqy15_t_gb2312b  

  // 初始化屏幕
  OLED_Init();

  OLED_Showchin(1,13,"正在连接WiFi....",0);
  WiFiManager wifiManager;
  wifiManager.autoConnect("ESP8266");

  OLED_Showchin(1,27,"WiFi连接成功！",0);
  OLED_Showchin(1,41,"名称： " + WiFi.SSID(),0);
  OLED_Showchin(1,55,"IP: " + WiFi.localIP().toString(),1);

  // 获取时间
  timeClient.begin();
  u8g2.setFont(u8g2_font_wqy15_t_gb2312b); //字体大小   u8g2_font_wqy15_t_gb2312b  

  OLED_Showchin(1,13,"宁小建",0);
  OLED_Showchin(1,27,"hhhhhhhhhhhh",0);
  OLED_Showchin(1,55,"大傻逼哈哈哈",1);

  timeClient.update();
  OLED_Showchin(1,20,"当前北京时间: ",0);
  OLED_Showchin(1,41,timeClient.getFormattedTime(),1);
  delay(1000);
  OLED_img();
}

// 重复执行程序
void loop() {
  // 更新时间
  // timeClient.update();
  // OLED_Showchin(1,27,"当前北京时间: ",0);
  // OLED_Showchin(1,41,timeClient.getFormattedTime(),0);
}

// 打印输出到屏幕（支持中文）
void OLED_Showchin(uint8_t x, uint8_t y, String string, uint8_t boot) {
  u8g2.setCursor(x, y);  //设置显示坐标
  u8g2.print(string);  // 指定缓存区需要打印的字符串
  u8g2.sendBuffer();          // 将定位信息发送到缓冲区
  if(boot == 1){
    delay(1000);
    u8g2.clearBuffer();     // 清除缓存，其实初始化里有清除，循环时一定要加上
  }
}

// 屏幕初始化
void OLED_Init() {
  oled.begin(SSD1306_SWITCHCAPVCC, 0x3C);     //"SSD1306_SWITCHCAPVCC"表示显示器为OLED ,"0x3C"为OLED屏幕默认通信地址
  oled.setTextColor(WHITE);//开像素点发光
  oled.clearDisplay();//清屏
}

// 输出屏幕
void OLED_ShowString(uint8_t x, uint8_t y, uint8_t font_size, String string) {
  oled.setTextSize(font_size);    //设置字体尺寸 (>=1)
  oled.setCursor(x, y);           //设置显示坐标
  oled.println(string);           //显示内容
  oled.display();                 //开启显示
}

// 绘画
void OLED_img() {
  //  图片数据
    const unsigned char gImage_1[518] = { 0X00,0X01,0X40,0X00,0X40,0X00,
  0X00,0X40,0X00,0X00,0X00,0X3E,0XF0,0X00,0X00,0X80,0X00,0X00,0X00,0X1F,0XE0,0X00,
  0X00,0X00,0X00,0X00,0X00,0X06,0XB0,0X00,0X01,0X00,0X00,0X00,0X00,0X03,0XF8,0X00,
  0X00,0X00,0X00,0X00,0X00,0X03,0XFC,0X00,0X00,0X00,0X00,0X00,0X00,0X03,0XDC,0X00,
  0X04,0X00,0X00,0X00,0X00,0X01,0XC0,0X00,0X0E,0X00,0X00,0X00,0X00,0X00,0X80,0X00,
  0X06,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X01,0X00,0X00,0X00,0X10,0X00,0X00,0X00,
  0X08,0X00,0X00,0X00,0X0E,0X00,0X00,0X00,0X08,0X00,0X00,0X00,0X8F,0X00,0X00,0X00,
  0X00,0X00,0X02,0X02,0X47,0X00,0X00,0X00,0X00,0X00,0X01,0X10,0X63,0X80,0X00,0X00,
  0X00,0X00,0X01,0XC9,0X73,0XC0,0X00,0X00,0X00,0X00,0X00,0XE4,0X79,0XE0,0X00,0X00,
  0X00,0X02,0X00,0XFA,0XF9,0XE0,0X00,0X00,0X10,0X02,0X00,0X7D,0X8C,0XF0,0X00,0X00,
  0X10,0X03,0X01,0X7E,0X90,0XF1,0X80,0X00,0X10,0X01,0X20,0XFD,0X1C,0X7B,0XE0,0X00,
  0X00,0X01,0XA0,0X7D,0X03,0X7B,0X20,0X00,0X10,0X01,0XD8,0XFF,0X8B,0X7E,0X30,0X00,
  0X00,0X01,0XFC,0X7F,0X83,0XB6,0X10,0X00,0X00,0X00,0XF7,0XFF,0XC7,0XBE,0X10,0X00,
  0X00,0X01,0X8F,0XFF,0XE3,0XF6,0X10,0X00,0X01,0X01,0X4F,0XFF,0XFF,0XFF,0X10,0X00,
  0X00,0X01,0XCF,0XFF,0XFF,0XDF,0X10,0X00,0X00,0X01,0XC3,0XFF,0XFF,0XDF,0X70,0X00,
  0X01,0X03,0XE3,0XFF,0XFF,0XDF,0XE0,0X00,0X04,0X01,0XE7,0XFF,0XFF,0XDF,0XE4,0X00,
  0X07,0X00,0XFB,0XFF,0XFF,0XDF,0XC0,0X00,0X07,0X00,0XFB,0XFF,0XFF,0XFE,0X00,0X00,
  0X13,0X00,0X7F,0XFF,0XFF,0XFC,0X00,0X00,0X01,0X20,0X3F,0XFF,0XFF,0XFC,0X00,0X00,
  0X00,0X00,0X3F,0XFF,0XFF,0XF8,0X00,0X0B,0X00,0X00,0X1F,0XFE,0X0F,0XF8,0X00,0X1F,
  0X00,0X00,0X1F,0XF8,0X6F,0XF0,0X00,0XFF,0X00,0X00,0X1F,0XE1,0XFF,0XF0,0X05,0XFF,
  0X00,0X00,0X0F,0XF3,0XFF,0XE0,0X03,0XFF,0X00,0X40,0X0F,0XF7,0XFF,0XC0,0X07,0XFF,
  0X00,0X00,0X07,0XFF,0XFF,0X80,0X07,0XFF,0X08,0X00,0X07,0XFF,0XFF,0X00,0X0F,0XFF,
  0X00,0X00,0X23,0XFF,0XFE,0X00,0X0F,0XFF,0X00,0X08,0X60,0XFF,0XFE,0X00,0X0F,0XFF,
  0X00,0X40,0X20,0X3F,0XFE,0X00,0X1F,0XFF,0X00,0X00,0X10,0X0B,0XFF,0X80,0X1F,0XFF,
  0X00,0X00,0X40,0X00,0X3F,0X00,0X1F,0XFF,0X00,0X00,0X10,0X00,0X3F,0X00,0X1F,0XFF,
  0X20,0X00,0X02,0X00,0X3F,0X00,0X3F,0XFF,0X00,0X00,0X00,0X00,0X7F,0X80,0X3F,0XFF,
  0X00,0X00,0X00,0X10,0X7F,0X80,0X7F,0XFF,0X00,0X00,0X00,0X80,0X7F,0X80,0X7F,0XFF,
  0X10,0X00,0X00,0X00,0X7F,0X80,0XFF,0XFF,0X30,0X00,0X00,0X00,0X7F,0X80,0XFF,0XFF,
  0X10,0X10,0X00,0X00,0X7F,0XC1,0XFF,0XFF,0X00,0X00,0X00,0X00,0X7F,0XF3,0XFF,0XFF,
  0X00,0X00,0X01,0X00,0X3F,0XFF,0XFF,0XFF,0X00,0X00,0X00,0X04,0X3F,0XFF,0XFF,0XFF,
  0X00,0X00,0X00,0X00,0X3F,0XFF,0XFF,0XFF,0X00,0X00,0X10,0X80,0X1F,0XFF,0XFF,0XFF,
  0X01,0X00,0X00,0X05,0X1F,0XFF,0XFF,0XFB,0X00,0X00,0X00,0X00,0X1F,0XF7,0XFF,0XFC,
  0X00,0X00,0X00,0X00,0X1F,0XFB,0XFF,0XFF,0X00,0X00,0X40,0X00,0X19,0XFF,0XFF,0XFF,
  };

  oled.clearDisplay();
  oled.drawBitmap(3, 1, gImage_1, 64, 64, WHITE);
  oled.display();
}