《明日方舟》前端界面復刻

VOICE

最近也是迎來了五一黃金週，你們過的怎麼樣，還開心嗎？恰好《明日方舟》公測也迎來了一週年，這裏試着用網頁還原了下其中幾個頁面，另外這篇文章的風格也是參照的這款遊戲呢。

View

部分界面預覽

演示地址

頁面是有部分音效的！！！當心不要上班點出來！！！

預覽地址: http://118.24.147.213/ READ MORE+

源碼地址: https://github.com/viewweiwu/arknights-react READ MORE+

服務器配置有點差，訪問的有點點慢。

技術選擇

• react 套餐
• react-hook
• typescript
• less css 預處理
• howler 音頻管理
• Live2dHelper live2d
• parallax-js 視差動效

資源數據來源

來源	數據類型	明細
明日方舟WIKI READ MORE+	圖片、數據	道具列表、幹員列表、幹員立繪...
明日方舟官網 READ MORE+	圖標、紋理、音頻、音效	-
mdnice	文檔、靜態資源	該文檔自定義 CSS

最後

VOICE

原本在採購商城的頁面裏是有一個 live2d 的，可是由於加載資源太慢了（bug 也多），就給去掉了，換回了帥氣的可露希爾。另外，若是有同窗想要知道一些技術細節，能夠選擇直接看源碼，其中一部分的，以後我也會再開文章介紹的。

View