本頁面使用機器翻譯自英語,可能包含錯誤或不清楚的語言。如需最準確的信息,請參閱英文原文。由於更新頻繁,部分內容可能與英文原文有出入。請加入我們在 Crowdin 上的努力,幫助我們改進本頁面的翻譯。 (Crowdin translation page, Contributing guide)
Mini Dapp SDK 整合
在本節中,我們將確保在遊戲中載入 Mini Dapp SDK。 要做到這一點,Cocos Creator 的 build-templates 目錄允許自訂網頁平台的遊戲建置方式,使其成為遊戲開始前預先載入 SDK 的必要工具。
透過在 build-templates/web-desktop 中建立自訂範本,我們可以在每次建立時自動包含 SDK,簡化開發與部署。
步驟 1:建立 build-templates 目錄
在 VS Code 中開啟您的專案,並在終端執行下列指令:
mkdir -p build-templates/web-desktop
步驟 2:在 Cocos Creator 中執行初始建置
- 移至 功能表 → 專案 → 建立。

-
將 Platform 設為 Web Desktop。
-
按一下 ** 建立**。

步驟 3:從建立目錄複製 index.html 檔案
建立完成後,將 index.html 檔案複製到 build-templates 目錄:
cp build/web-desktop/index.html build-templates/web-desktop/
步驟 4:修改 index.html 以包含 Mini Dapp SDK
編輯 build-templates/web-desktop/index.html 並在 <head> </head> 區段內加入下列 Mini Dapp SDK 程式碼標籤:
<script src="https://static.kaiawallet.io/js/dapp-portal-sdk.js"></script>
步驟 5:驗證建立設定
- 在 Cocos Creator 中重建專案。
- 檢查產生的
build/web-desktop/index.html。 - 確認 Mini Dapp SDK script 已正確包含。
步驟 6:建立與預覽專案
完成設定後,按一下 Cocos Creator 編輯器上方的 Play on Device。 您的遊戲應該會在新的瀏覽器標籤中開啟。


將 Web 建立路由至 Localhost:3000
為了安全和開發目的,Mini Dapp SDK 目前在 localhost:3000 上運作。 目前,預設的 Unity WebGL 建置使用隨機連接埠 (如 7457),為了讓我們的應用程式能有效運作,我們需要設定我們的 Unity WebGL 建置開啟於 localhost:3000。
若要執行,請遵循下列步驟:
- 複製並貼上以下程式碼到您的專案終端
# Install http-server globallynpm install -g http-server
- 導覽至建立資料夾
cd build/web-desktop
- 在連接埠 3000 上啟動伺服器
http-server -p 3000
測試和執行應用程式
現在我們的專案已經開始執行,讓我們來測試並與它互動。
- 按一下 Connect Wallet 按鈕,連線至 Dapp Portal Wallet。
- 連線後,將固定金額匯入已連線的位址。
