# H5与小程序通信示例

这个文件夹包含了H5页面与小程序通信的完整示例。

## 📁 文件说明

### 页面文件
- `test.html` - 主测试页面，包含所有通信功能
- `test1.html` - 简单跳转页面示例
- `test2.html` - 表单页面示例（包含日志功能）

### 工具库
- `../js/utils/h5-bridge.js` - H5与小程序通信工具函数库

## 🎯 功能演示

### test.html - 主要功能
- 📷 **扫码** - 调用小程序原生扫码功能
- 🖼️ **选择图片** - 调用小程序原生图片选择
- 📤 **H5图片上传** - 纯H5实现的图片上传
- 📎 **H5附件上传** - 纯H5实现的文件上传
- 📞 **拨打电话** - 调用小程序拨号功能
- 💾 **存储操作** - 小程序本地存储读写
- 🔙 **返回小程序** - 智能返回功能

### test1.html - 页面跳转
- 简单的页面间跳转示例
- 演示不需要结果处理的场景

### test2.html - 表单应用
- 完整的表单页面示例
- 扫码结果填入表单
- 图片选择添加到表单
- 表单数据持久化
- 操作日志记录

## 🔧 技术特点

### 通信机制
- 使用中央控制器模式
- 支持数据双向传递
- 完整的错误处理

### 两种上传方式
1. **小程序原生上传** - 调用小程序API，需要页面跳转
2. **H5原生上传** - 纯前端实现，无需跳转，体验更好

### 函数库设计
- 简单的函数调用，无需类初始化
- 统一的错误处理
- 灵活的回调机制

## 🚀 使用方法

1. 在小程序中配置webview页面
2. 引入h5-bridge.js工具库
3. 调用相应的通信函数
4. 在handleResult中处理返回结果

## 📱 测试建议

建议在真实的微信小程序环境中测试：
- H5上传功能的兼容性
- 各种原生功能的调用
- 页面跳转和数据传递

这些示例为正式业务开发提供了完整的技术基础。