# MP-Mirror-Demo

**Repository Path**: ezxrdev/mp-mirror-demo

## Basic Information

- **Project Name**: MP-Mirror-Demo
- **Description**: 灵境工坊小程序接入示例 Demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-11
- **Last Updated**: 2025-07-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mirror 插件示例工程

这是一个展示如何在微信小程序中集成和使用 Mirror 插件的示例项目。Mirror 插件提供了 AR（增强现实）功能，支持场景渲染、拍照、录像等功能。

## 项目概述

本示例工程演示了两种使用 Mirror 插件的方式：

1. **方法一：调用插件中的页面** - 简单快速，但 UI 不可定制
2. **方法二：调用插件的组件** - 可支持在上层自定义更多逻辑以及 UI

## 项目结构

```
mp-mirror-demo/
├── app.js                 # 小程序入口文件
├── app.json              # 小程序配置文件
├── pages/
│   ├── index/            # 首页 - 展示两种接入方式
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── custom-page/      # 自定义页面 - 使用插件组件
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
├── project.config.json   # 项目配置文件
└── sitemap.json         # 站点地图配置
```

## 功能特性

### 首页功能
- 提供两个导航按钮，分别展示不同的插件使用方式
- 美观的渐变按钮设计和简洁的说明文字

### 自定义页面功能
- **AR 场景渲染**：使用 `mirror-scene` 组件渲染 3D 场景
- **拍照功能**：支持拍摄 AR 场景照片并分享
- **录像功能**：支持录制 AR 场景视频并保存到相册
- **事件监听**：监听触摸元素、资源加载进度等事件
- **性能监控**：实时显示 FPS 信息

## 插件配置

在 `app.json` 中配置 Mirror 插件：

```json
{
  "plugins": {
    "mirror-plugin": {
      "version": "4.3.3",
      "provider": "wxb2e0f389e1c20a5f"
    }
  }
}
```

## 使用方法

### 方法一：使用插件页面

直接跳转到插件提供的页面：

```xml
<navigator url="plugin://mirror-plugin/scene-page?appKey=YOUR_APP_KEY&appSecret=YOUR_APP_SECRET&sceneId=YOUR_SCENE_ID">
  使用预设的场景页面
</navigator>
```

### 方法二：使用插件组件

在页面中使用 `mirror-scene` 组件：

```xml
<mirror-scene 
  id="plugin_comp" 
  sceneObj="{{sceneObj}}" 
  debug="{{true}}" 
  showLoading="{{true}}"
  bind:imgTrackerSwitch="handleImgTrackerSwitch"
  bind:assetLoaded="handleAssetLoaded"
  bind:assetProgress="handleAssetProgress"
  bind:handleTouchElement="handleTouchElement">
</mirror-scene>
```

## 核心 API

### 拍照功能
```javascript
const res = await this.plugin.takePhoto()
// 使用微信分享图片菜单
wx.showShareImageMenu({
  path: res.tempPath
})
```

### 录像功能
```javascript
// 开始录像
await this.plugin.recordStart(videoBitsPerSecond)

// 结束录像
const res = await this.plugin.recordFinish()
// 保存到相册
wx.saveVideoToPhotosAlbum({
  filePath: res.tempPath
})
```

### 获取性能信息
```javascript
// 获取当前 FPS
const fps = this.plugin.getFps()

// 获取录制状态
const isRecording = this.plugin.getRecordState()
```

## 配置参数

### sceneObj 配置
```javascript
sceneObj: {
  appKey: 'YOUR_APP_KEY',      // 应用密钥
  appSecret: 'YOUR_APP_SECRET', // 应用秘钥
  sceneId: 'YOUR_SCENE_ID'     // 场景 ID
}
```

## 事件回调

- `handleTouchElement`: 触摸 3D 元素时触发
- `handleImgTrackerSwitch`: 图像跟踪状态切换时触发
- `handleAssetLoaded`: 资源加载完成时触发
- `handleAssetProgress`: 资源加载进度更新时触发

## 开发环境

- 微信开发者工具
- 支持 ES6 语法
- 启用增强编译
- 支持 PostCSS

## 注意事项

1. 需要在微信开发者工具中开启插件调试模式
2. 确保 appKey、appSecret 和 sceneId 配置正确
3. 录像功能需要用户授权相册权限
4. 建议在真机上测试 AR 功能效果

## 许可证

本示例项目仅供学习和参考使用。