# 娃娃机H5

**Repository Path**: phpzzq/wawaji-h5

## Basic Information

- **Project Name**: 娃娃机H5
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-16
- **Last Updated**: 2026-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 娃娃机 H5 项目

这是一个基于 uni-app 框架开发的娃娃机 H5 项目。

## 环境要求

- Node.js >= 12.x
- HBuilderX（推荐）或 uni-app CLI
- npm 或 yarn

## 安装依赖

```bash
npm install
```

或

```bash
yarn install
```

## 运行项目

### 方式一：使用 HBuilderX（推荐）

1. 下载并安装 [HBuilderX](https://www.dcloud.io/hbuilderx.html)
2. 打开 HBuilderX，选择 `文件` → `打开目录`，选择本项目目录
3. 运行项目：
   - **H5 运行**：点击顶部菜单 `运行` → `运行到浏览器` → 选择浏览器（Chrome/Edge/Safari等）
   - **微信小程序**：点击 `运行` → `运行到小程序模拟器` → `微信开发者工具`
   - **APP 运行**：点击 `运行` → `运行到手机或模拟器` → 选择设备

### 方式二：使用命令行

```bash
# 运行到 H5
npm run dev:h5

# 运行到微信小程序
npm run dev:mp-weixin

# 运行到 APP
npm run dev:app-plus
```

## 项目配置

### API 配置

项目 API 基础地址配置在 `main.js` 文件中：

```javascript
const BaseUrl = 'https://wwj.cbjerry.com'
Vue.prototype.siteBaseUrl = BaseUrl + '/api/';
```

### 微信小程序配置

在 `manifest.json` 中配置微信小程序 AppID（当前为空，需要填写）：

```json
"mp-weixin": {
    "appid": "",  // 需要填写你的微信小程序 AppID
    "setting": {
        "urlCheck": false
    }
}
```

## 项目结构

```
wawaji-h5/
├── pages/              # 页面文件
│   ├── index/         # 首页相关页面
│   ├── user/          # 用户相关页面
│   ├── knapsack/      # 背包相关页面
│   └── ...
├── components/        # 自定义组件
├── static/            # 静态资源
├── common/            # 公共配置
├── uni_modules/       # uni-app 插件模块
├── manifest.json      # 应用配置文件
├── pages.json         # 页面路由配置
├── main.js            # 入口文件
└── App.vue            # 应用根组件
```

## 技术栈

- **框架**：uni-app (Vue 2)
- **UI 组件库**：uview-ui
- **其他依赖**：
  - trtc-sdk-v5：腾讯云实时音视频 SDK
  - tcplayer.js：腾讯云播放器
  - weixin-js-sdk：微信 JS-SDK

## 注意事项

1. **首次运行**：需要先执行 `npm install` 安装依赖
2. **微信小程序**：需要配置正确的 AppID 才能运行
3. **API 地址**：确保后端 API 服务可访问
4. **H5 运行**：默认使用 hash 路由模式，开发服务器不启用 HTTPS

## 常见问题

### 1. 依赖安装失败

如果遇到依赖安装问题，可以尝试：

```bash
# 清除缓存
npm cache clean --force

# 删除 node_modules 和 package-lock.json 后重新安装
rm -rf node_modules package-lock.json
npm install
```

### 2. HBuilderX 无法运行

- 确保已安装 HBuilderX 并配置好运行环境
- 检查 Node.js 版本是否符合要求
- 尝试在 HBuilderX 中重新安装插件

### 3. 编译警告

项目已修复所有 v-for 缺少 key 的警告，如果还有其他警告，不影响运行。

## 开发规范

- 使用 Vue 2 语法
- 组件命名使用 PascalCase
- 页面文件使用 kebab-case
- v-for 循环必须添加 `:key` 属性

## 许可证

[根据实际情况填写]