工欲善其事

1. 安裝HBuilderX，HBuilderX 相關
2. 微信開發者工具下載
3. uni-app 快速上手官方指導

uni-app 開發流程

創建uni-app

1. 在點擊工具欄裏的文件 -> 新建 -> 項目（快捷鍵 Ctrl+N）

2. 選擇 uni-app 類型，輸入工程名，選擇模板，點擊創建，即可成功創建。

   • 日常開發推薦使用 uni ui項目模板
   • Vue 版本選擇

運行uni-app

方式一：工具欄運行

在微信開發者工具裏運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具，即可在微信開發者工具裏面體驗uni-app。

• 🔥如果是第一次使用，HBuilderX 需要配置開發工具的相關路徑。點擊 HBuilderX 工具欄的運行 -> 運行到小程序模擬器 -> 運行設置，配置相應小程序開發者工具的路徑。
• 🔥微信小程序工具需要配置允許權限。點擊 微信開發者工具 工具欄的設置 -> 安全設置，開啓服務端口。
• 如果自動啓動小程序開發工具失敗，請手動啓動小程序開發工具並將 HBuilderX 控制枱提示的項目路徑，打開項目。

方式二：快捷方式運行

1. 快捷鍵運行 Ctrl+R
2. HBuilderX 快捷運行菜單，可以按數字快速選擇要運行的設備

發佈uni-app

1. 申請微信小程序AppID
2. 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-微信"，輸入小程序名稱和appid點擊發行即可
3. 微信開發者工具工具中真機調試無誤後，點擊上傳

uni-app 配置

1. settings.json：即 HBuilderX 工具中運行 -> 運行到小程序模擬器 -> 運行設置，找到相應的小程序開發者工具配置位置，瀏覽工具路徑並選擇配置。
2. 開啓服務端口：即微信開發者工具工具中設置 -> 安全設置開啓。

寓樂猜燈謎

項目結構

uni-guess-riddle/
├── pages/
│   ├── index/         # 首頁
│   ├── review/        # 題目回顧
│   └── game/          # 遊戲頁面
├── static/
│   └── images/        # 靜態圖片
├── store/             # Pinia狀態管理
└── uni.scss           # 全局樣式

首頁

可選擇遊戲模式：

• 簡單模式：8道簡單題，適合新手
• 普通模式：10道隨機難度題（推薦）
• 困難模式：12道題，包含高難度題目

遊戲頁面

1. 🔄 隨機題目系統

   • 燈謎庫包含400+條謎語，分類豐富
   • 每次遊戲隨機抽取題目
   • 保證每次遊戲體驗都不同

2. 📊 智能評分系統

   • 基礎分：簡單10分/中等20分/困難30分
   • 時間獎勵：答對越快，加分越多（最高30分）
   • 提示扣分：使用提示扣除5分

3. 📈 詳細數據統計

   • 最終得分
   • 用時統計
   • 答對題數
   • 準確率
   • 遊戲模式記錄

題目回顧

展示了本局答題信息。

效果

1. 從git上下載代碼後，導入 HBuilderX 後運行即可查看效果，代碼如下：

   • Github 地址
   • Gitee 地址
2. 掃碼查看小程序：