JavaScript

規則： 保持 Markdown 結構。 不翻譯 URL 和代碼。 只返回翻譯內容，不附加評論。 # MoeKoe Music Mobile 一款開源、簡潔、高顏值的第三方酷狗音樂移動端播放器 基於 Expo / React Native 构建而成，是 [MoeKoeMusic](https://github.com/iAJue/MoeKoeMusic) 桌面版的移動端實現 🌎 GitHub 存儲庫 | 📦️ 下載安裝包 | 💬 访問博客 | 🏠 專案首頁 一款開源、簡潔、高顏值的第三方酷狗音樂移動端播放器 基於 Expo / React Native 构建而成，是 MoeKoeMusic 桌面版的移動端實現 ✨ 特性 🎵 無需自建伺服器 — 酷狗 API 适配層直接直連官方，開箱即用，不依賴外部 API 地址 🏠 首頁推薦 — 每日推薦、精選歌單、排行榜 🧭 發現頁 — 分類歌單、新歌速遞等內容探索 🔍 搜索 — 快速檢索歌曲、歌單、專輯 📀 歌單 / 專輯 / 排行榜 — 完整的詳情頁與曲目列表 🎧 播放器 — 滾動歌詞、播放隊列、迷你播放條（MiniPlayer）、後台播放 🎚️ 音質檢測 — 自動探測並選擇可用音質 📱 手機號登錄 — 同步酷狗賬號的收藏與歌單 🌗 深色模式 — 跟隨系統自動切換明暗主題 📝 Todo List [x] 首頁每日推薦 / 精選歌單 / 排行榜 [x] 發現頁分類內容瀏覽 [x] 搜索歌曲、歌單、專輯 [x] 歌單 / 專輯 / 排行榜詳情頁 [x] 播放器：滾動歌詞、播放隊列、迷你播放條、後台播放 [x] 音質檢測與自動選擇 [x] 手機號登錄 [x] 賬號密碼登錄 [x] 扫描登錄(其他設備) [x] 我喜歡 / 收藏同步 [x] 用戶歌單管理（創建 / 收藏 / 編輯） [ ] 通知欄 / 锁屏播放控制 [ ] 歌曲詳情瀏覽 [ ] 桌面歌詞 [ ] 聽歌識曲 [ ] 平板與橫屏適配 [ ] 性能優化 📸 預覽 🚀 快速開始 環境要求 Node.js ≥ 22 Git iOS 模擬器 / Android 模擬器，或安裝了開發版客戶端的真機 開發運行 # 克隆倉庫（包含 api submodule） git clone --recurse-submodules https://github.com/MoeKoeMusic/MoeKoeMusic-Mobile.git cd MoeKoeMusic-Mobile # 安裝依賴 npm install npm --prefix api install # 生成移動端 API 入口（api/ 更新後需重新執行） npm run generate:mobile-api # 啟動開發伺服器 npx expo start 如果克隆時遺漏了 submodule，可執行 git submodule update --init 补齊。 ...

規則： 保持 Markdown 結構。 不翻譯 URL 和代碼。 只返回翻譯內容，不附加其他評論。 MoeKoe 音樂擴展 MoeKoe 音樂瀏覽器擴展版，基於 MoeKoeMusic Web 构建並在瀏覽器擴展內完成 API 路由兼容。 🌎 GitHub 存儲庫 特性 點擊瀏覽器擴展圖標後打開獨立窗口運行 MoeKoeMusic。 不需要用戶配置 API 地址，也無需額外啟動本地 API 服務。 保留 MoeKoeMusic 原有 Web 頁面與互動，兼容瀏覽器擴展運行環境。 快速開始 環境要求 Node.js 20 或更高版本 Git Chrome / Edge 等 Chromium 内核瀏覽器 安裝依賴 git submodule update --init --recursive npm install npm run install:app npm run install:app 將分別安裝 MoeKoeMusic 和 MoeKoeMusic/api 的依賴。安裝後建議檢查子模塊工作區，避免把上游 lockfile 的非預期變化提交進去。 ...

在開發插件市場之前，先有的是 MoeKoe 的普通插件系統。 當時我想解決的問題不是某一個具體功能，而是一個更通用的问题：播放器裡總會冒出很多小需求，有些人想改界面，有些人想加一個工具彈窗，有些人想接自己的服務。如果每個想法都往主程序裡塞，主程序會越來越重，也越來越難維護。 所以我一開始給插件系統定的方向很明確：主程序只提供插件運行環境和管理入口，具體功能交給插件自己去做。插件能獨立安裝、獨立卸載，壞了也盡量不要影響播放器本身。 上一篇文章我寫的是 MoeKoeMusic-Plugins 這個插件登記倉庫。那邊解決的是“插件市場的數據怎麼產生”：用戶用 Issue 提交，Action 校驗，維護者審核，通過後寫進 plugins.json。 但只有登記倉庫還不夠。真正對用戶來說，插件市場不是 GitHub 上的一份 JSON，而是客戶端裡一個能看、能搜、能安裝、能更新的入口。 所以這篇就換到 MoeKoe Music 主項目裡，專門聊客戶端的插件市場部分。 為什麼選擇 Chrome Extension 這一套 MoeKoe 是 Electron 應用，Electron 本身就有加載擴展的能力。既然底层已經能跑 Chrome Extension，那就沒有必要再從零設計一套插件格式。 這樣做有幾個好處: 第一，插件作者不用學一套完全陌生的格式。manifest.json、popup.html、background.js 都是很常見的概念。 第二，插件天然有清單文件。主程序可以先讀 manifest.json，判斷插件名稱、版本、描述、權限、彈窗入口、最低支持版本等信息。 第三，Electron 可以直接加載插件目錄，不需要我自己寫一個腳本沙箱。 展示、搜索、分頁和狀態 插件市場不只是能安裝就行，還要能快速判斷： 這個插件是幹什麼的 我有没有安裝過 我安裝的是不是舊版本 這個插件有没有更高版本要求 它有没有網絡、文件訪問、本地二進制這些風險點 分頁、搜索、更新、狀態 所以市場卡片裡展示的不只是“安裝”按鈕。 確保插件目錄存在 調用 Electron 下載安裝、卸載舊版、安裝新版 註冊插件相關 IPC 加載 Chrome 擴展 加載 Native Host 索引和授權系統 已安裝插件 插件管理頁面的“已安裝插件”不只是讀取 Electron 當前加載的擴展。它會把兩類信息合併： session.defaultSession.getAllExtensions() 拿到已加載擴展 scanExtensions() 扫描磁盤插件目錄，讀取 manifest、圖標、彈窗、Native Host 声明 前端拿到這些字段後，就能顯示： ...

緊接上文：《同一個動畫，我用三種技術棧實現的區別?》 WebGL 二次元石頭剪刀布小遊戲。 規則很普通： 石頭 > 剪刀 剪刀 > 布 布 > 石頭 但有趣的是在於： 輸了會脫衣服。 對,就是這麼簡單粗暴。 起因其實是「我想研究精靈圖」 一開始我根本沒想做遊戲。 我只是想研究： atlas sprite 圖層疊加 動畫裁剪 這些東西。 然後想著：「總得有個實際應用場景吧？」 於是腦子一抽： 那乾脆做個二次元脫衣猜拳。 然後項目開始朝奇怪方向狂奔。 這個項目最麻煩的其實不是遊戲邏輯 石頭剪刀布規則簡單得離譜。 真正麻煩的是：衣服層級 因為角色不是：「一張完整圖片」 而是： 底圖 (防粿體被抓包,特意加密了) 衣服 A 衣服 B 衣服 C 配飾 遮擋層 不停疊。 「脫衣」其實是圖層管理 玩家贏了： 按設定好的順序移除一件衣服 電腦贏了： 再按逆序穿回來 聽起來簡單。 實際上會遇到一堆問題： 比如「不能瞬間露底圖」 這個特別關鍵。 如果你： 先刪舊衣服 再加新衣服 中間可能會閃出底圖。 於是視覺效果會特別怪。 所以我後來用了：reveal 覆蓋邏輯 新的層會立刻頂上。 盡量避免： 「裸體一幀閃現」。 雖然本身這項目看起來不正經 但至少技術上要優雅。 WebGL 在這裡真的很舒服 這個項目我最後選 WebGL 做。 原因很簡單：圖層太多。 ...

最近我做了個挺有意思的小實驗。 我把一個二次元角色的小動畫效果，分別用： WebGL Canvas 2D 純 DOM + CSS 實現了三遍。 效果本身不複雜： 眨眼 眉毛/下眼皮聯動 流汗輕微飄動 呆毛甩動 但真正有意思的，其實不是「做出來」。 而是： 同一個東西，用三種技術棧實現時，到底會差多少？ 本質上就是一次「前端圖形學味很濃」的復刻實驗。 一開始只是想復刻一個呆毛動畫 靈感來源：https://tamanidamani.itch.io/nijikas-ahoge 我當時想法特別簡單：「如果是我,要怎麼實現？」 然後越做越上頭。最後直接演變成： 那我乾脆把 WebGL、Canvas2D、DOM 三種方案都做一遍算了。 於是倉庫就變成了現在這樣： canvas/ canvas2D/ dom/ 三個版本同效果實現。 先說結論 如果只讓我說一句話： WebGL 最強，但 Canvas2D 最舒服，DOM 最適合業務 1. WebGL 版本：最像「真正遊戲開發」 這個版本是最折騰的。 因為它本質上已經不是「前端動畫」了, 而是：GPU 圖形編程 它到底怎麼實現的？ 核心思路其實就是： 底圖一層 精靈圖一層層貼 shader 控制繪製 JS 驅動動畫參數 比如： 呆毛旋轉 眨眼裁剪 alpha 混合 這些其實都在 GPU 那邊做。 你會開始接觸： uniform texture shader UV 頂點座標 紋理座標 然後人會逐漸失去笑容。 但 WebGL 真強 當元素一多的時候, WebGL 那種： 「完全不慌」 的感覺特別明顯。 尤其是： ...

✨ 緒山真尋的小窩 ✨ 🌸 歡迎來到緒山真尋的小窩 🌸 哇！你發現了我的秘密基地！(*≧ω≦) 這裡是緒山真尋的個人網站，充滿了可愛的動畫和有趣的內容！我會在這裡分享我喜歡的動畫、漫畫、遊戲和一些日常生活中的小確幸～ 💕 關於我 💕 我是緒山真尋，一個熱愛成人遊戲的家裡蹲廢柴尼特族。喜歡動畫、漫畫、輕小說和各種可愛的東西！最喜歡的顏色是粉色和淡藍色！ ∩∩ （･ω･） <- 這是我！ ＿|　⊃／(＿＿ ／ └-(＿＿＿／ 🎀 網站內容 🎀 🌟 精美動畫展示 📚 我的私房照 🎵 好聽的音樂 📷 日常生活的小片段 🌈 關於 🌈 🎭 演示: 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. 💌 特別感謝 💌 感謝所有喜歡緒山真尋的朋友們！(●’◡’●) ...

多鏈錢包整合的實踐反思 總算是空閒下來可以整理一下程式碼了，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 建構方式都不太一樣，甚至連網路延遲和穩定性都影響體驗。 ...

ArticleSync - 多平台文章同步插件 ArticleSync 是一個瀏覽器擴充功能，幫助使用者輕鬆將文章同步發佈到多個社交平台。支援將文章從本地草稿發佈到各大平台，如知乎、Bilibili 等。它提供了一站式解決方案，讓你在不同的社交媒體平台上同步文章變得簡單高效。 基於瀏覽器外掛程式模式，自動偵測本地登入帳號，杜絕帳號洩露、環境異常等風險 基於 Chrome Manifest v3 瀏覽器擴充功能標準開發，請注意核心版本要求 背景 你也知道，我這又一下子多了好幾個部落格平台，和一大堆社交網站，如果我想讓它們之間都能保持活躍的更新怎麼辦。(證明我還活著) 還能一鍵盜文章 我最常更新的就是我自己的小破站了，但是其他平台，我可能就只是偶爾更新一下，但是又不想每次都去手動發佈，所以我就想，能不能寫一個外掛程式，自動偵測我本地登入的帳號，然後自動發佈呢。 正所謂，自己動手豐衣足食。鼓搗了好幾天，勉強算是能用的樣子，剩下的就有空再更新了。除非你給我錢 外掛程式還有很多不完善的地方，我也沒有多平台正式在生產環境中實測，如遇報錯，實屬正常，那就提交 issue 吧，或者自己改改，改好了再提交 PR 吧。嘻嘻~ 為了不影響我說話，截圖放最後了 還有，開源不易，來個 star 吧，嘿嘿嘿~ 本來想加一點私貨進去的，自動關注我的社群平台 功能特色 多平台支援：支援知乎、Bilibili 等各大主流平台，支援自建開源 CMS 系統。 狀態追蹤：在外掛程式介面中查看文章的同步狀態。 帳號管理：可查看與外掛程式綁定的各平台帳號資訊。 可擴展性強：支援開發者透過轉接器模式輕鬆擴展到更多平台。 安全可靠：外掛程式基於瀏覽器擴充功能模式，確保帳號安全，避免帳號洩露等風險。 待辦事項 [ ] 獨立文章編輯器 [ ] 圖片一鍵同步 [x] Markdown 與 HTML 互轉 [ ] 第三方圖床系統 [ ] 多帳號管理 [ ] 多系統客戶端版本 [ ] 一鍵 AI 總結 [ ] 影片同步 [ ] 標籤、分類的支援 [ ] 更友善的錯誤處理 [ ] 更多平台的接入 支援管道 媒體 ...