ss_dc_wechat_mini_program_h5/examples

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上传功能的兼容性
• 各种原生功能的调用
• 页面跳转和数据传递

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